如何用 chrome 瀏覽器模擬行動裝置檢視網站畫面

以前網站前端設計師的工作，只要搞定桌上型各種瀏覽器畫面一致就好，但是現在手持行動裝置普及，各種解析度紛紛出籠，因此 RWD 設計，變成一種必要的考慮規格。如果你有錢，當然可以購入各種手持裝置來做測試，這是最準確的方式，但必須花費一筆龐大的支出，所以 google 很貼心的將 chrome 設計成可以模擬各種解析度大小畫面。

要讓 chrome 模擬各種不同解析度滿簡單的，只要在你想要看的網頁中，點擊滑鼠右鍵，選擇『檢查元素』，這時候瀏覽器下方會出現『開發者工具』，這是網頁設計師相當熟悉的檢視工具，然後再點擊工具列上的小手機 icon，模擬器就會出現了(再點擊一次就能關閉模擬器)。

 

模擬的畫面說明：

• 左上方『Device』：這會列出一些常用的手機品牌、型號，方便你選擇。
• 左下方：會顯示轉換後畫面實際的寬和高，你也可以自己輸入。
• 右上方『Network』：表示不同的網路速度載入效果。
• 右下方『UA』：表示 user-agent，網頁設計 RWD 效果，利用 css 判斷寬度最方便，但有時我們會用程式會判斷使用者的瀏覽器表頭資訊，這個就很重要。

 

這個模擬器也有缺點，例如無法多點觸控模擬、或是滑動的手勢模擬也不是那麼好呈現。總之，它也幫你省下一筆費用了，其他測試中遇到的問題再想辦法囉。