適應性設計模式

適應性設計（響應式設計）是指能令大多數不同設備，能有著相似效果的網站設計實做。特別是指手機平板，也能有如同桌機筆電般的效果。

在此，最重要的影響因素是螢幕寬度。但也有其他諸如像素的密度、有沒有支援觸控之類的因素。適應性設計模式提供了這些因素的簡單模擬法、以觀察網站在不同的設備下，會是什麼樣子。

有三種方法能切換到適應性設計模式：

• 透過 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。

要讓螢幕在直放與橫放間切換，請點選設備選擇器旁邊的圖標：

若你只在網速很快的環境下測試，你網站可能會在網速慢的環境下碰上問題。在適應性設計模式裡面，你可以叫瀏覽器用大略的速度，模擬不同的上網方案。

這些方案會模擬：

• 下載速度
• 上載速度
• 最小延遲

下方表格列出了各網路方案的大略數值，但請不要用這個功能做精確的性能測量：此功能目的，是給出不同條件下的用戶體驗。

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

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

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

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