隨著移動(dòng)用戶(hù)的增長(zhǎng)，移動(dòng)端友好的響應(yīng)式網(wǎng)站設(shè)計(jì)變得越來(lái)越重要。網(wǎng)頁(yè)的內(nèi)容要在不同的設(shè)備以及各種網(wǎng)絡(luò)環(huán)境下看起來(lái)都不錯(cuò)才行。但是想要測(cè)試移動(dòng)端的體驗(yàn)需要較長(zhǎng)時(shí)間，并且調(diào)試也相當(dāng)困難。

在你的瀏覽器選項(xiàng)卡中有設(shè)備模式，該模式可以讓你看到在設(shè)備上的體驗(yàn)效果，這就是移動(dòng)仿真的力量。

你可以使用設(shè)備模式來(lái)：

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

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

啟用設(shè)備模式

要打開(kāi)設(shè)備模式請(qǐng)點(diǎn)擊切換設(shè)備模式 http://wiki.jikexueyuan.com/project/chrome-devtools/images/icon-device-mode-off.png" alt="icon-device-mode-off" /> 圖標(biāo)。當(dāng)設(shè)備模式開(kāi)啟的時(shí)候，該圖標(biāo)會(huì)變成藍(lán)色并且當(dāng)前視圖會(huì)變成設(shè)備模擬器。

你也可以用鍵盤(pán)快捷鍵來(lái)讓設(shè)備模式在啟用和禁用之間切換：

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/device-mode-initial-view.png" alt="device-mode-initial-view" />

使用屏幕模擬器

設(shè)備模式下的屏幕模擬器可以讓你不用在不同設(shè)備之間切換就能測(cè)試站點(diǎn)的響應(yīng)靈敏度。

從使用預(yù)設(shè)的設(shè)備開(kāi)始

設(shè)備模式中已經(jīng)含有不少預(yù)設(shè)的設(shè)備讓你能夠更快地開(kāi)始調(diào)試。下拉預(yù)設(shè)的設(shè)備欄來(lái)快速選擇一個(gè)特定的設(shè)備。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/device-and-network-tools.png" alt="device-and-newwork-tools" />
從列表中選擇設(shè)備可以省去手動(dòng)配置的時(shí)間。

每個(gè)預(yù)設(shè)的設(shè)備通過(guò)以下方式來(lái)模擬設(shè)備：

• 將請(qǐng)求指定為 UA 字符串
• 設(shè)置設(shè)備的分辨率和像素比
• 開(kāi)啟觸控仿真（如果能夠使用的話(huà)）
• 模擬設(shè)備的滾動(dòng)條并加入到視圖中，然后將視圖調(diào)整到設(shè)備的視角
• 頁(yè)面的自適應(yīng)文本不需要專(zhuān)門(mén)定義設(shè)備視角

提示：通過(guò)模擬屏幕分辨率 http://wiki.jikexueyuan.com/project/chrome-devtools/images/icon-emulate-resolution.png" alt="icon-emulate-resolution" /> 復(fù)選框可以開(kāi)啟或者關(guān)閉屏幕分辨率模擬器。點(diǎn)擊更改方向 http://wiki.jikexueyuan.com/project/chrome-devtools/images/icon-swap-dimensions.png" alt="icon-swap-dimensions" /> 圖標(biāo)可以在橫向和豎向之間切換屏幕。選中 Fit 復(fù)選框來(lái)使模擬器的屏幕保持瀏覽器窗口大小，必要的時(shí)候會(huì)縮放視圖來(lái)適應(yīng)瀏覽器窗口（此設(shè)置是為了方便并且用統(tǒng)一的方式來(lái)模擬設(shè)備）。

自定義屏幕設(shè)置

如果想要對(duì)模擬器做出更加細(xì)致的設(shè)定，你可以使用預(yù)設(shè)設(shè)備列表下方的分辨率設(shè)置。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/screen-controls.png" alt="screen-controls" />
通過(guò)調(diào)整屏幕分辨率和像素比來(lái)自定義屏幕模擬器

想要自定義一個(gè)屏幕尺寸，可以在設(shè)備的長(zhǎng)寬字段內(nèi)設(shè)置 CSS 像素尺寸值。

如果你想在一個(gè)非 Retina 屏的設(shè)備上模擬 Retina 屏設(shè)備，調(diào)整設(shè)備像素比 http://wiki.jikexueyuan.com/project/chrome-devtools/images/icon-DPR.png" alt="icon-DPR" /> 字段。設(shè)備像素比（DPR）是指邏輯上的像素和實(shí)際像素之比。擁有 Retina 屏的設(shè)備，比如 iPhone 5，擁有比普通設(shè)備更加高的像素密度，這對(duì)清晰度和視覺(jué)區(qū)域的大小有一定影響。

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

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

提示：如果你有 Retina 屏設(shè)備，你就會(huì)注意到低 dpi 圖像看起來(lái)會(huì)存在馬賽克而高 dpi 看起來(lái)則相當(dāng)清晰。想要在普通屏幕中模擬這種效果，將 DPR 設(shè)置為 2 并且通過(guò)縮放來(lái)調(diào)整屏幕尺寸。此時(shí) 2x 的信息看起來(lái)會(huì)很清晰，而 1x 則很模糊。

模擬網(wǎng)絡(luò)連接

對(duì)于移動(dòng)端用戶(hù)來(lái)說(shuō)，在不同網(wǎng)絡(luò)狀況下站點(diǎn)都能有良好表現(xiàn)是非常重要的。

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/network-throttling.png" alt="network-throttling" />

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

審查 media query

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/media-query.gif" alt="media-query" />

要使用 media query，點(diǎn)擊窗口左邊頂部的 media query http://wiki.jikexueyuan.com/project/chrome-devtools/images/icon-media-query.png" alt="icon-media-query" /> 圖標(biāo)。DevTools 會(huì)檢測(cè)到你的樣式表中的 media query 并將他們用不同顏色的長(zhǎng)條在頂部顯示。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/media-query-inspector-ruler.png" alt="media-query-inspector-ruler" />

media query 的顏色表示：

• 藍(lán)色：查詢(xún)目標(biāo)的最大寬度。
• 綠色：查詢(xún)目標(biāo)寬度范圍。
• 橘色：查詢(xún)目標(biāo)最小寬度。

預(yù)覽屏幕樣式

點(diǎn)擊 media query 條形圖案來(lái)調(diào)整模擬器的分辨率并預(yù)言目標(biāo)屏幕大小的樣式。

查看 CSS

右鍵點(diǎn)擊某個(gè)長(zhǎng)條可以查看 media query 是在 CSS 中哪里定義的，并且可以跳轉(zhuǎn)到源碼中的相應(yīng)位置。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/reveal-source-code.png" alt="reveal-source-code" />

提示：你使用 media query 監(jiān)視器的時(shí)候，你可能覺(jué)得你并不想一直開(kāi)啟移動(dòng)模擬器。要在不退設(shè)備模式的情況下關(guān)閉移動(dòng)模擬器，點(diǎn)擊 全部重置 http://wiki.jikexueyuan.com/project/chrome-devtools/images/icon-reset-overrides.png" alt="icon-reset-overrrides" /> 圖標(biāo)并刷新頁(yè)面即可。

預(yù)覽更多媒體類(lèi)型的樣式

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

通過(guò)點(diǎn)擊瀏覽器窗口頂部右側(cè)的 More overrides http://wiki.jikexueyuan.com/project/chrome-devtools/images/icon-open-emulator-drawer.png" alt="icon-open-emulator-drawer" /> 圖標(biāo)來(lái)打開(kāi) DevTools 模擬菜單。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/emulation-drawer-media.png" alt="emulation-drawer-media" />

選中 CSS media 復(fù)選框，然后在下拉列表中選擇一種媒體類(lèi)型。

模擬設(shè)備傳感器

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

要控制傳感器，點(diǎn)擊瀏覽器右側(cè)上方的 More overrides http://wiki.jikexueyuan.com/project/chrome-devtools/images/icon-open-emulator-drawer.png" alt="icon-open-emulator-drawer" /> 圖標(biāo)。然后在出現(xiàn)的模擬菜單中選擇 Sensors。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/emulation-drawer-sensors.png" alt="emulation-drawer-sensors" />

注意：如果你的應(yīng)用使用 JavaScript（如 Modernizr）來(lái)檢測(cè)傳感器狀況，請(qǐng)確認(rèn)你是在開(kāi)啟傳感模擬器后重新加載頁(yè)面。

觸發(fā)觸摸事件

觸屏模擬器讓你可以精準(zhǔn)測(cè)試點(diǎn)擊事件，并且其反應(yīng)就像你用的就是一臺(tái)觸屏設(shè)備一樣。

在 sensors 面板中選中 Enable touch screen 復(fù)選框來(lái)啟用觸控模擬。

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

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/touch-emulation.gif" alt="touch-emulation" />

模擬多點(diǎn)觸控

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

提示：可以使用這份代碼來(lái)嘗試結(jié)合 DevTools 調(diào)試器以及觸控仿真。

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

和電腦不同，移動(dòng)設(shè)備一般會(huì)使用 GPS 硬件來(lái)監(jiān)測(cè)位置信息。在設(shè)備模式下，你可以通過(guò) Geolocation API 來(lái)模擬定位。

在 sensors 面板下選中 Emulation geolocation coordinates 復(fù)選框可以開(kāi)啟定位模擬器。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/emulation-drawer-geolocation.png" alt="emulation-drawer-geolocation" />

在地理定位信息無(wú)法使用的情況下，你可以使用模擬來(lái)重寫(xiě) navigator.geolocation 的位置信息。

提示：使用這份代碼來(lái)實(shí)際體驗(yàn)一下地理定位模擬器。

模擬設(shè)備屏幕方向

如果你需要測(cè)試加速器信息，只需要使用 Orientation API。同時(shí)，你也可以使用加速計(jì)模擬器來(lái)模擬相關(guān)數(shù)據(jù)。

在 sensors 面板中選中 Accelerometer 復(fù)選框來(lái)啟用加速計(jì)模擬器。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/emulation-drawer-accelerometer.png" alt="emulation-drawer-accelerometer" />

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

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

你也可以直接點(diǎn)擊并拖動(dòng)加速計(jì)模型來(lái)將設(shè)備調(diào)整到需要的方向。

提示：通過(guò)這份代碼來(lái)實(shí)際嘗試加速計(jì)模擬器。

自定義設(shè)備

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

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/custom-device-settings.png" alt="custom-device-settings" />
添加新設(shè)備

限制

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

目前已知的問(wèn)題有以下這些：

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

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