在PC用瀏覽器輕鬆模擬移動設備檢視RWD設計

在各種瀏覽器檢查建好的網頁顯示和javascript執行是否正常,是前端作業不可或缺的一環。RWD自適應網頁設計還需加上在各種移動設備上檢視,確認在各種解析度都有依設計正常顯示。

但移動設備百百款不可能每樣手上都有,因此模擬檢視的工具就很重要。還好Chrome和FireFox瀏覽器都很貼心的提供這項功能,不用裝外掛就可輕鬆模擬檢視,若所用的Chrome和FireFox沒找到這項功能,建議更新到最新版就OK。

在FireFox檢視RWD設計

  • 在網頁上按右鍵,點選「檢查元素」
  • 打開「自適應網頁模式」
    好了,進入「自適應網頁模式」模擬檢視在各種設備上的顯示。可以切換解析度,也可旋轉方向,目前FireFox預設6種解析度,可拖拉右邊緣自行調整所要的解析度,還挺便利哦。



在Chrome檢視RWD設計

  • 在網頁上按右鍵,點選「檢查元素」
  • 確認「drawer」和「toggle emulation」都有啟動,也就是像圖中兩個按鈕需是藍色才表示啟動,若沒有按一下即可。
    好了,進入「自適應網頁模式」,可以選擇要模擬的裝置,Chrome比較貼心直接提供設備名稱,你也可以在Resolution那列自行設定解析度,按中間的鈕即可旋轉。Chrome真的可模擬觸控感覺像模擬手滑整個環境很仿真哦。


這個網誌中的熱門文章

沒印表機沒關係 便利商店找印去

被時代淘汱的英文怎麼說

探訪神秘的烏法魯神殿

色情廣告視窗關不掉? 動手解解看吧~

玩轉水晶石工作室 妝點個人部落