Firefox 與 Chrome 的 RWD 測試工具

RWD 系列文章 》

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

》Firefox

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



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



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



》Chrome

開啟開發人員工具。



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



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



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

RWD 系列文章 》



1 則留言:

天秤女佳佳 提到...

謝了~
我喜歡這篇!!!

F12
Chrome 的模擬器好難用@@