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

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

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

chrome-agent

 

模擬的畫面說明:

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

 

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

發表迴響