Firefox 與 Chrome 的 RWD 測試工具

RWD 系列文章 》

因為裝置的多樣式， RWD 已成為網頁設計的基本技能之一，而 Firefox 與 Chrome 同時提供了 RWD 測試工具。

》Firefox

展開開發者工具面板，按一下板手圖示，開啟相關面板：



點選適應性設計檢視模式，切換至模擬器。



最上方的數字選單中，列舉了數種常見的數位裝置尺寸，將其展開可以選取所要檢視的尺寸。



》Chrome

開啟開發人員工具。



按一下ESC按鈕，於出現的面板中，按一下Emulation進一步開啟模擬器畫面。



模擬器畫面中，開啟選單其中列舉各種常見的裝置，點選所要測試的裝置，按一下Emulate按鈕，畫面上顯示指定的裝置呈現的網頁外觀。



相較於 Firefox ，Chrome 的模擬器無法模擬媒體查詢的斷點切換，只是單純的調整顯示畫面尺寸，用處不大。

RWD 系列文章 》