|
|
Google在2014年發佈「2014 台灣跨裝置消費者與電子商務」研究報告中指出，台灣消費者平均每 8 分鐘就要滑一次手機，並認為業者如果沒有意識到這狀況，若未掌握到行動優勢，不管是企業、還是電商，在2016年後很有可能被淘汰。
多螢幕時代，網頁設計師做好網頁，經常需要使用多螢幕進行網頁demo，對於RWD響應式設計的網頁來說，我們可能只想簡單的調整瀏覽器視窗大小來做視覺版面的測試。但對於mobile web 手機版網頁和jQuery網頁程式效果，我們就經常需要真的使用多裝置(手邊有的各廠牌手機或各型號、甚至平板等)，一起進行畫面與功能的測試。
或是在向客戶展示手機裝置的網頁畫面呈現時，多少也會擔心，客戶突然看到情人傳給你的LINE推播訊息。
今天就來分享，Google Chrome瀏覽器擴充功能的免費套件「User Agent Switcher」瀏覽裝置切換功能。透過此套件可直接在電腦上模擬使用各種行動裝置的瀏覽器，可輕鬆呈現行動裝置的網頁測試與demo。
1. 在Chrome瀏覽器的功能表中，點選"更多工具"→"擴充功能"。
|
|
2. 點選在擴充功能清單中最下方的"取得更多擴充功能"。
|
|
3. 在Chrome 線上應用程式商店的搜尋框，下關鍵字"user-agent switcher for Chrome"
|
|
4. 找到如畫面中清單所列出的擴充套件，(以下範例為圖中第一個 by google.com所開發的套件)
點擊右方藍色按鈕"+加到CHROME"。
|
|
5. 跳出視窗確認是否新增套件？請按下"新增擴充功能"。
|
|
6. 擴充功能加入成功，chrome瀏覽器右上方會多出一個按鈕。
|
|
7. 此時可再回到擴充功能。
|
|
8. 找出剛才新增的套件。勾選"允許在無痕模式中進行"，這個設定可讓我們透過Chrome瀏覽器的無痕視窗下也能使用此套件。
|
|
我們來看User Agent Switcher的裝置模擬功能：
1. 開啟Chrome瀏覽器。
|
|
2. 下關鍵字進行搜尋，此時為原本的電腦裝置所呈現的網頁畫面。
|
|
3. 點擊瀏覽器右上方的裝置模擬按鈕。
|
|
4. 套件列出全球常見的裝置系統與瀏覽器名稱，如果我們點選清單中的"Android"。
|
|
"Android"子項目出現"Android KitKat"。
|
|
"iOS"子項目出現"iPhone 6與iPad"
|
|
"Safari"子項目出現"Mac Safari 7"
|
|
5. 假設選擇的是"Android"下的"Android KitKat"，而網頁畫面則變成了Android版本的Chrome瀏覽器所看到的畫面。
|
|
套件圖示下方出現"AND"
|
|
6. 這時候再把瀏覽器視窗的寬度調整一下(如同手機Chrome瀏覽器畫面)
|
|
7. 點選套件項目"Chrome"中的子項"Default"，即可切換回原本的電腦版Chrome瀏覽器畫面。
|
|
|
|
|