適應性設計模式
本頁在講述 Firefox 52 及其後的適應性設計模式。要找之前的版本,請參閱適應性設計模式(Firefox 52 之前)。這個版本的適應性設計模式還要啟動 Firefox multi-process support (e10s)。如果沒有啟動的話,你還是會看到舊版的適應性設計模式。
適應性設計(響應式設計)是指能令大多數不同設備,能有著相似效果的網站設計實做。特別是指手機平板,也能有如同桌機筆電般的效果。
在此,最重要的影響因素是螢幕寬度。但也有其他諸如像素的密度、有沒有支援觸控之類的因素。適應性設計模式提供了這些因素的簡單模擬法、以觀察網站在不同的設備下,會是什麼樣子。
切換適應性設計模式
有三種方法能切換到適應性設計模式:
- 透過 Firefox 選單:從網頁開發者工具的選單選取「適應性設計模式」(如果是 OS X 則是 Tools menu)。
- 透過網頁開發者工具:在開發者工具的工具欄點選「適應性設計模式」的按鈕:
- 透過鍵盤:按下 Ctrl + Shift + M(在 OS X 是 Cmd + Opt + M)。
使用適應性設計模式
啟動適應性設計模式後,網頁的內容會縮成特定設備的尺寸。初始是 320 x 480 像素:
你可以獨立切換顯示開發者工具的位置:
當適應性設計模式啟動時,你可以在大小調整後的區域內,如同平常一般地瀏覽。
設備選擇
在視區上方你會看到「尚未選擇裝置」:點選此欄就能看到裝置清單。選一個裝置,適應性設計模式就會設定以模擬該裝置的這些屬性:
- 螢幕大小
- 設備像素比例(設備物理的像素對上獨立於設備的像素之比例)
- 觸控事件
另外,Firefox 還會設定用戶代理的 HTTP 請求標頭,以標定自己為該裝置的預設瀏覽器。例如說,當你選了 iPhone,Firefox 就會把自己標為 Safari。navigator.userAgent
屬性也會成為該值。
選單所列出的裝置,只是選定裝置的子集。在該選單的底下有個「編輯清單…」的選項。選定以後就會看到所有選項,還能點選想要在選單出現的設備選項。設置的相關聯裝備與數值,是取自於 https://github.com/mozilla/simulated-devices。
儲存自訂設備
54 版以後的 Firefox 允許你自訂設備。各設備都會有:
- 大小
- 設備像素比例
- 用戶代理
- 是否支援觸碰
另外,你還能透過把滑鼠停在設備名,以瀏覽該設備的屬性資訊。他們會以快顯視窗的形式出現。
裝置控制
你也能給多數設備支援自訂屬性。
設定螢幕大小
要設定螢幕大小,請點擊視窗下面的數值並修改之:
你也可以點右下角的三角形後不放,以自行調整你需要的大小。
設定設備像素比例
要自訂備像素比例,請點擊「DPR」標籤並選定想要的值。
模擬觸控事件切換
要啟動或關閉觸控事件,請點選手指圖示的圖標:
在觸控事件啟動時,滑鼠事件會被轉為觸控事件。
開啟觸控事件會強制頁面重啟,因為許多頁面會在載入的時候檢查觸控,若支持觸控事件的話,也將增加 event handler。
切換方向
要讓螢幕在直放與橫放間切換,請點選設備選擇器旁邊的圖標:
網路限速
若你只在網速很快的環境下測試,你網站可能會在網速慢的環境下碰上問題。在適應性設計模式裡面,你可以叫瀏覽器用大略的速度,模擬不同的上網方案。
這些方案會模擬:
- 下載速度
- 上載速度
- 最小延遲
下方表格列出了各網路方案的大略數值,但請不要用這個功能做精確的性能測量:此功能目的,是給出不同條件下的用戶體驗。
選取 | 下載速度 | 上載速度 | 最小延遲(毫秒) |
---|---|---|---|
GPRS | 50 KB/s | 20 KB/s | 500 |
Regular 2G | 250 KB/s | 50 KB/s | 300 |
Good 2G | 450 KB/s | 150 KB/s | 150 |
Regular 3G | 750 KB/s | 250 KB/s | 100 |
Good 3G | 1.5 MB/s | 750 KB/s | 40 |
Regular 4G/LTE | 4 MB/s | 3 MB/s | 20 |
DSL | 2 MB/s | 1 MB/s | 5 |
Wi-Fi | 30 MB/s | 15 MB/s | 2 |
要選擇網路的話,請點選標示著「不限速」的標籤: