設備模式&移動仿真

隨著移動用戶的增長，移動端友好的響應式網(wǎng)站設計變得越來越重要。網(wǎng)頁的內容要在不同的設備以及各種網(wǎng)絡環(huán)境下看起來都不錯才行。但是想要測試移動端的體驗需要較長時間，并且調試也相當困難。

在你的瀏覽器選項卡中有設備模式，該模式可以讓你看到在設備上的體驗效果，這就是移動仿真的力量。

你可以使用設備模式來：

• 通過模擬不同的屏幕大小和分辨率來測試你的響應式設計效果如何，此模式下 Retina 屏幕也可以模擬。
• 使用網(wǎng)絡模擬器來評估你的站點的性能，并且不會影響到其他選項卡。
• 可視化并審查 CSS 媒體問題。
• 準確模擬設備輸入，比如觸控事件、地理位置以及設備屏幕朝向。
• 結合目前已經(jīng)學過的 DevTools 技以及設備模式，可以更好的提高你的調試工作流效率。

注意：該文檔所提及的某些功能可能并不是穩(wěn)定版 Chrome 自帶的。如果你無法使用 Chrome 某種新特性，請使用 Chrome Canary 來獲取最新版本的 DevTools。

啟用設備模式

要打開設備模式請點擊切換設備模式 圖標。當設備模式開啟的時候，該圖標會變成藍色并且當前視圖會變成設備模擬器。

你也可以用鍵盤快捷鍵來讓設備模式在啟用和禁用之間切換：

Ctrl + Shift + M（或者在 Mac上使用 Cmd + Shift + M）

使用屏幕模擬器

設備模式下的屏幕模擬器可以讓你不用在不同設備之間切換就能測試站點的響應靈敏度。

從使用預設的設備開始

設備模式中已經(jīng)含有不少預設的設備讓你能夠更快地開始調試。下拉預設的設備欄來快速選擇一個特定的設備。

從列表中選擇設備可以省去手動配置的時間。

每個預設的設備通過以下方式來模擬設備：

• 將請求指定為 UA 字符串
• 設置設備的分辨率和像素比
• 開啟觸控仿真（如果能夠使用的話）
• 模擬設備的滾動條并加入到視圖中，然后將視圖調整到設備的視角
• 頁面的自適應文本不需要專門定義設備視角

提示：通過模擬屏幕分辨率 復選框可以開啟或者關閉屏幕分辨率模擬器。點擊更改方向 圖標可以在橫向和豎向之間切換屏幕。選中 Fit 復選框來使模擬器的屏幕保持瀏覽器窗口大小，必要的時候會縮放視圖來適應瀏覽器窗口（此設置是為了方便并且用統(tǒng)一的方式來模擬設備）。

自定義屏幕設置

如果想要對模擬器做出更加細致的設定，你可以使用預設設備列表下方的分辨率設置。

通過調整屏幕分辨率和像素比來自定義屏幕模擬器

想要自定義一個屏幕尺寸，可以在設備的長寬字段內設置 CSS 像素尺寸值。

如果你想在一個非 Retina 屏的設備上模擬 Retina 屏設備，調整設備像素比 字段。設備像素比（DPR）是指邏輯上的像素和實際像素之比。擁有 Retina 屏的設備，比如 iPhone 5，擁有比普通設備更加高的像素密度，這對清晰度和視覺區(qū)域的大小有一定影響。

網(wǎng)頁中關于 DPR 密度的一些例子如下：

• CSS 媒體查詢，比如 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... }
• CSS 圖片設置規(guī)則
• 圖片來源屬性如何設置
• window.devicePixelRatio 屬性

提示：如果你有 Retina 屏設備，你就會注意到低 dpi 圖像看起來會存在馬賽克而高 dpi 看起來則相當清晰。想要在普通屏幕中模擬這種效果，將 DPR 設置為 2 并且通過縮放來調整屏幕尺寸。此時 2x 的信息看起來會很清晰，而 1x 則很模糊。

模擬網(wǎng)絡連接

對于移動端用戶來說，在不同網(wǎng)絡狀況下站點都能有良好表現(xiàn)是非常重要的。

設備的網(wǎng)絡連接狀況可以讓你來測試你的站點在不同網(wǎng)絡狀況下的變現(xiàn)如何，包括 2G、3G 甚至是離線狀態(tài)都可以模擬。在預設的列表中可以選擇網(wǎng)絡連接，選好之后相應的網(wǎng)絡帶寬限制和延時操作狀況就會在程序中生效。

網(wǎng)絡限制會自動限制其最大下載吞吐量（傳輸速率）。延時操作會在連接時自行產(chǎn)生最低的延遲（RTT）。

審查 media query

Media query 是響應式網(wǎng)站設計中相當重要的一部分。設備模式讓你能夠更輕松地審查 media query。

要使用 media query，點擊窗口左邊頂部的 media query 圖標。DevTools 會檢測到你的樣式表中的 media query 并將他們用不同顏色的長條在頂部顯示。

media query 的顏色表示：

• 藍色：查詢目標的最大寬度。
• 綠色：查詢目標寬度范圍。
• 橘色：查詢目標最小寬度。

預覽屏幕樣式

點擊 media query 條形圖案來調整模擬器的分辨率并預言目標屏幕大小的樣式。

查看 CSS

右鍵點擊某個長條可以查看 media query 是在 CSS 中哪里定義的，并且可以跳轉到源碼中的相應位置。

提示：你使用 media query 監(jiān)視器的時候，你可能覺得你并不想一直開啟移動模擬器。要在不退設備模式的情況下關閉移動模擬器，點擊 全部重置 圖標并刷新頁面即可。

預覽更多媒體類型的樣式

Media query 監(jiān)視器的目標樣式主要用于屏幕。如果你想預覽其他媒體類型，比如輸出，你可以在模擬選項下的 media 面板中實現(xiàn)這一功能。

通過點擊瀏覽器窗口頂部右側的 More overrides 圖標來打開 DevTools 模擬菜單。

選中 CSS media 復選框，然后在下拉列表中選擇一種媒體類型。

模擬設備傳感器

由于大多數(shù)電腦沒有觸控屏幕、GPS 芯片以及加速器，這些設備的輸入是很難在開發(fā)設備上測試的。設備模式的傳感模擬器減少了大部分模擬常規(guī)設備傳感器的開銷。

要控制傳感器，點擊瀏覽器右側上方的 More overrides 圖標。然后在出現(xiàn)的模擬菜單中選擇 Sensors。

注意：如果你的應用使用 JavaScript（如 Modernizr）來檢測傳感器狀況，請確認你是在開啟傳感模擬器后重新加載頁面。

觸發(fā)觸摸事件

觸屏模擬器讓你可以精準測試點擊事件，并且其反應就像你用的就是一臺觸屏設備一樣。

在 sensors 面板中選中 Enable touch screen 復選框來啟用觸控模擬。

當你和模擬界面進行交互的時候，光標會變成一個手指大小的圓圈，并且觸控事件會可以像在移動設備上一樣被觸發(fā)。（例如 touchstart，touchmove,touchend）

注意：要觸發(fā) elem.ontouch 處理，你必須使在 Chrome 上使用命令行標簽 --touch-events。默認情況下觸控仿真不會觸發(fā)這些處理器。

模擬多點觸控

在支持多點觸控輸入的設備上（電腦的觸控板等），你可以模擬移動設備的多點觸控事件。如果想要了解關于設置多點觸控模擬的更多信息，請參考 HTML5 Rocks 上“DevTools” 部分的網(wǎng)頁多點觸控開發(fā)指南。

提示：可以使用這份代碼來嘗試結合 DevTools 調試器以及觸控仿真。

重寫地理定位數(shù)據(jù)

和電腦不同，移動設備一般會使用 GPS 硬件來監(jiān)測位置信息。在設備模式下，你可以通過 Geolocation API 來模擬定位。

在 sensors 面板下選中 Emulation geolocation coordinates 復選框可以開啟定位模擬器。

在地理定位信息無法使用的情況下，你可以使用模擬來重寫 navigator.geolocation 的位置信息。

提示：使用這份代碼來實際體驗一下地理定位模擬器。

模擬設備屏幕方向

如果你需要測試加速器信息，只需要使用 Orientation API。同時，你也可以使用加速計模擬器來模擬相關數(shù)據(jù)。

在 sensors 面板中選中 Accelerometer 復選框來啟用加速計模擬器。

你可以對以下方向數(shù)據(jù)做出操作：

• α: z軸的旋轉數(shù)值
• β: 從左向右的傾斜值
• γ: 從前向后的傾斜值

你也可以直接點擊并拖動加速計模型來將設備調整到需要的方向。

提示：通過這份代碼來實際嘗試加速計模擬器。

自定義設備

設備模式提供了大量的仿真設備。如果你發(fā)現(xiàn)有些設備并沒有涵蓋到，那么你可以添加一個自定義的設備。要添加一個自定義的設備，請執(zhí)行以下步驟：

1. 前往 DevTools 設置頁面。
2. 激活 Devices 選項卡。
3. 點擊面板底部的 "Add custom device" 按鈕。
4. 在接下來顯示的表單中填入相應的數(shù)據(jù)。
5. 點擊 "Add Device"。
6. 開啟設備模式然后在設備列表中找到你設置的自定義設備。

添加新設備

限制

盡管 Chrome 的設備模式提供了許多實用的工具，它也有著一定的限制。

目前已知的問題有以下這些：

• 設備硬件問題
  • GPU 和 CPU 還無法模擬。
• 瀏覽器的 UI 問題
  • 移動系統(tǒng)的某些顯示部分，比如地址欄，無法模擬。
  • 一些原生的顯示模式，比如 <select> 元素等，無法模擬。
  • 一些增強功能，比如通過數(shù)字輸入來打開鍵盤等行為，可能和實際設備不大相同。
• 瀏覽器的功能問題
  • 在模擬器中使用了 WebGL 功能，但是在 iOS 7 的設備上并不支持該功能。
  • Chrome 不支持 MathML，但是 iOS 7 設備支持該工呢過。
  • iOS 5 方向縮放問題并沒有模擬出來。
  • CSS 的行高屬性在模擬器中可以使用，但是 Opera Mini 并不支持該屬性。
  • 一些 CSS 規(guī)則的限制，比如在 Internet Exploer 中的那樣，并沒有模擬出來。
• AppCache
  • 在模擬器中 AppCache 的 manifest 文件以及查看源請求并沒有覆蓋掉 UA。

盡管有著上述諸多現(xiàn)實，設備模式模擬器依舊足以承擔大多數(shù)工作。當你想在實際設備上測試的時候，你可以參考 DevTools 的教程 remote debugging 來了解更多信息。