更新後的Device Mode(裝置模式)（從Chrome 49開始）是現在“移動優先”開發工具的一個組成部分，並擴充套件了主要的DevTools 工具條。瞭解如何使用其控制元件來模擬各種裝置或完全響應式。

TL;DR

• 使用Device Mode(裝置模式)的螢幕模擬器測試你的網站的響應式佈局。
• 儲存自定義預設，以便以後輕鬆訪問它們。
• 裝置模式不能完全代替真實裝置的測試。 注意其侷限性。

使用可視視窗控制元件

Viewport Controls(可視視窗控制元件)允許你針對各種裝置測試您的網站，以及完全響應式。 它有兩種模式：

• Responsive(響應式) - 通過任意任何一個調節手柄自由調整可視視窗大小。
• Specific Device(指定裝置) - 將可視視窗鎖定在特定裝置的確切可視視窗大小，並模擬某些裝置特徵。

Responsive Mode(響應式模式)

我們建議使用Responsive Mode(響應式模式)作為預設工作模式。在你網站和應用程式的開發期間使用它，並經常調整視口的大小，以建立一個自由的響應式設計，適應甚至未知和未來的裝置型別。

要充分利用響應式模式，請開啟媒體查詢欄。

自定義可視視窗的大小

拖動可視視窗上的調節手柄或單擊選單欄中的值來進行精細度的控制。

Specific Device Mode(指定裝置模式)

當你已經接近開發結束或者希望完善你的網站在特定手機（例如某個iPhone或Nexus）上的顯示效果時，可以使用Specific Device Mode

內建裝置預設

我們已在裝置下拉列表中添加了當前最受歡迎的裝置。選擇裝置後，每個預設自動配置某些裝置的模擬特性：

• 設定正確的 "User Agent" (UA) 字串。
• 設定裝置解析度和DPI（裝置畫素比）。
• 模擬觸控事件（如果適用）。
• 模擬移動滾動條疊加和元視口。
• 為沒有定義的視口的頁面自動調整（提升）文字。

新增自定義裝置預設

Device Mode(裝置模式)提供了各種各樣的裝置進行模擬。如果你發現邊緣情況或沒有被預置的特定裝置時，你可以新增自定義裝置。

要新增自定義裝置：

• 轉到 DevTools Settings(設定)。
• 點選Devices(裝置)選項卡。
• 點選Add custom device
  (新增自定義裝置)。
• 輸入裝置名稱，寬度，高度，裝置畫素比和使用者代理字串。
• 單擊Add(新增)。

現在，你的自定義裝置可以在Device(裝置)下拉選單中找到，並且使用了。

裝置狀態和方向

當模擬特定裝置時，Device Mode(裝置模式)工具欄顯示一個附加控制元件，主要用於切換模擬裝置的橫向和縱向。

在所選裝置上，控制元件不僅僅是定向切換。 對於受支援的裝置（如Nexus 5X），您會看到一個下拉選單，允許您模擬某些裝置狀態，例如：

• 預設瀏覽器UI
• 帶Chrome導航欄
• 開啟鍵盤

縮放至合適

有時，你需要測試解析度大於瀏覽器視窗中實際可用空間的裝置。在這些情況下，縮放至合適選項就派上用場：

• Fit to Window (適合至視窗) - 自動將縮放級別設定為最大可用空間。
• Explicit percentages(顯式百分比) - 如果您想要測試影象上的DPI，顯式百分比是有用的。

可選的控制元件（如觸控、媒體查詢，DPR）

可以通過點選裝置工具欄右側的三個小點來更改或啟用可選控制元件。當前可選項包括：

• 使用者代理型別（模擬UA和觸控事件）
• 裝置畫素比
• 媒體查詢
• 標尺
• 網路配置（UA，網路調節）

請繼續閱讀以瞭解有關具體選項的詳情。

(愚人碼頭注：以下內容在最新版的Device Mode(裝置模式)中有所更改)

User agent type（使用者代理型別）

User Agent Type(使用者代理型別) 或Device Type(裝置型別)設定讓你更改裝置的型別。 可能的值有：

• Mobile(移動)
• Desktop(桌面)
• Desktop with touch(帶觸控的桌面)

更改此設定將影響移動視口和觸控事件模擬，並更改UA字串。因此，如果您想為網站建立響應式的PC網站，並想要測試懸停效果，你應該從Responsive Mode(響應式模式)切換到“Desktop”。

裝置畫素比（DPR）

如果您想在非Retina屏的機器上模擬Retina屏裝置，或反過來，只需要調整Device pixel ratio(裝置畫素比)就可以了。Device pixel ratio(裝置畫素比)（DPR）是邏輯畫素和物理畫素之間的比率。具有Retina屏的裝置，例如Nexus 6P，比常規裝置具有更高的畫素密度，它可以影響內容的視覺清晰度和視覺大小。

網上有一些關於Device pixel ratio(裝置畫素比)（DPR）的例子：

• CSS媒體查詢,比如:@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... }
• window.devicePixelRatio 屬性。

如果你有一個原生Retina顯示，您會注意到，低 "Dots Per Inch" (DPI) 的資源看起來畫素化，而較高DPI的資源是清晰的。為了在標準顯示器上模擬這種效果，將DPR設定為2並通過比例縮放視口。2x的資源看起來依然清晰，而1x將看起來畫素化。

媒體查詢

媒體查詢是響應式網頁設計的一個重要組成部分。要檢視媒體查詢檢查器，在三點選單中點選Show Media queries(顯示媒體查詢)。 DevTools 會檢測樣式表中的媒體查詢，並在頂部標尺中將其顯示為彩色條。

媒體查詢的顏色編碼如下：

快速預覽一個媒體查詢

點選一個媒體查詢欄可以調整視口大小和目標螢幕尺寸的預覽樣式。

檢視相關的CSS

右鍵單擊某一欄可以檢視CSS中定義該媒體查詢的位置並跳轉到原始碼中的定義。

標尺

切換此選項可在視口旁顯示基於畫素的標尺。

配置網路（UA，網路調節）

選擇此選項將開啟一個抽屜式面板，允許你更改網路相關行為：

Disk Cache(磁碟快取)：當DevTools處於開啟狀態,禁用Disk Cache(磁碟快取),停止頁面,並且它們的資源不會被瀏覽器快取。 Network Throttling(網路限制)：閱讀更多關於網路限制。 User Agent(使用者代理)：允許您設定特定的UA（使用者代理）字串覆蓋。

提示：您也可以從 主選單 中開啟Network conditions(網路條件)抽屜式面板。

侷限性

Device Mode(裝置模式)有一些侷限性。

• 裝置硬體
• GPU和CPU的行為無法模擬。
• 瀏覽器的使用者介面（UI）
• 系統顯示，比如位址列，不會被模擬。
• 本地顯示器，如 <select> 元素，不會模擬為一個模態列表。
• 一些增強功能，如開啟數字輸入鍵盤，可能與實際裝置的行為有所不同。
• 瀏覽器功能
• WebGL可以在模擬器中實現，但iOS 7裝置不支援。
• Chrome不支援MathML，但iOS 7裝置支援。
• line-height CSS屬性在模擬器中執行，但Opera Mini不支援。
• CSS規則的限制，如在Internet Explorer中的哪些限制，不會被模擬。
• APPCache
• 模擬器不會覆蓋AppCache 的 清單檔案 或 檢視原始碼請求 的UA。

儘管有這些限制，Device Mode(裝置模式)對於大多數任務都足夠穩健。當你需要在真實裝置上測試時，您可以使用遠端除錯獲取更多資訊。