適應性設計模式

本頁在講述 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

要選擇網路的話,請點選標示著「不限速」的標籤:

擷圖

要擷取視口的螢幕畫面,請點擊相機圖示:

畫面會放在 Firefox 預設的下載目錄。

Firefox 53 以後,若你在設定頁面點選「將畫面擷圖拍到剪貼簿」,螢幕擷圖就會複製到作業系統的剪貼簿。

文件標籤與貢獻者

 此頁面的貢獻者: iigmir
 最近更新: iigmir,