(圖片來源)
現在的網頁很多都是採用RWD設計,可以讓訪客在不同的螢幕尺寸中都得到最佳的閱讀效果,而之前也介紹過幾個線上的Responsive Layout測試工具,可以協助我們來模擬各尺寸的的效果,今天,在拜讀了「Responsive Web Design Tester 響應式網頁開發工具,在瀏覽器測試網站顯示效果」一文後,突然想到其實Firefox已經有內建類似的功能,透過這個「適應性設計檢視模式」就可以簡單的達到我們的需求,很適合不想要額外裝外掛的人且使用率不高的人試試
網址:Responsive Design View 官方說明
【使用教學】
請先進入你要查看的網頁,然後點擊在Firefox功能列上的「工具」→「網頁開發者」→「適應性設計檢視模式」,或者直接利用熱鍵「Ctrl + Shift + M」來開啟,如果是Mac的系統,則熱鍵為「Cmd + Opt + M」
啟動之後就可以看到模擬的畫面了
在這個模擬的檢視畫面中,有幾項功能是可以利用的,分別說明如下,請自行對照圖片中標示的號碼:
- 關閉「適應性設計檢視模式」
- 內建已經有幾個螢幕尺寸可以套用,如果沒有符合的尺寸,可以自行手動輸入大小
- 旋轉螢幕方向,可以模擬橫式的螢幕
- 模擬觸控事件
- 擷圖
- 透過這個拉桿,可以自由的調整想要的尺寸大小
使用內建的RWD檢視模式好處就是不用再另行安裝外掛,而且執行上也蠻正常的,以我自己的網站為例,當我使用較小螢幕尺寸來檢視時,就會自動變方行動版的網頁排版,有此需要的人記得把這個功能記下來
延伸閱讀:Google Resizer § 預覽RWD設計的網頁排版