利用Firefox內建的適應性設計檢視模式來查看各螢幕尺寸所呈現的網頁樣貌


(圖片來源)

現在的網頁很多都是採用RWD設計,可以讓訪客在不同的螢幕尺寸中都得到最佳的閱讀效果,而之前也介紹過幾個線上的Responsive Layout測試工具,可以協助我們來模擬各尺寸的的效果,今天,在拜讀了「Responsive Web Design Tester 響應式網頁開發工具,在瀏覽器測試網站顯示效果」一文後,突然想到其實Firefox已經有內建類似的功能,透過這個「適應性設計檢視模式」就可以簡單的達到我們的需求,很適合不想要額外裝外掛的人且使用率不高的人試試

網址:Responsive Design View 官方說明

【使用教學】

請先進入你要查看的網頁,然後點擊在Firefox功能列上的「工具」→「網頁開發者」→「適應性設計檢視模式」,或者直接利用熱鍵「Ctrl + Shift + M」來開啟,如果是Mac的系統,則熱鍵為「Cmd + Opt + M」

啟動之後就可以看到模擬的畫面了

在這個模擬的檢視畫面中,有幾項功能是可以利用的,分別說明如下,請自行對照圖片中標示的號碼:

  1. 關閉「適應性設計檢視模式」
  2. 內建已經有幾個螢幕尺寸可以套用,如果沒有符合的尺寸,可以自行手動輸入大小
  3. 旋轉螢幕方向,可以模擬橫式的螢幕
  4. 模擬觸控事件
  5. 擷圖
  6. 透過這個拉桿,可以自由的調整想要的尺寸大小

使用內建的RWD檢視模式好處就是不用再另行安裝外掛,而且執行上也蠻正常的,以我自己的網站為例,當我使用較小螢幕尺寸來檢視時,就會自動變方行動版的網頁排版,有此需要的人記得把這個功能記下來

延伸閱讀:Google Resizer § 預覽RWD設計的網頁排版