使用裝置模式即可估算網頁在行動裝置上的外觀和效能。
總覽
裝置模式是 Chrome 開發人員工具中一系列功能的名稱，可協助您模擬行動裝置。這些功能包括：
限制
將裝置模式想像成網頁在行動裝置上的第一順位，在裝置模式下，您不必在行動裝置上執行程式碼，您可以從筆記型電腦或桌上型電腦模擬行動裝置使用者體驗。
開發人員工具無法模擬行動裝置的某些部分。舉例來說，行動 CPU 的架構與筆電或桌機 CPU 的架構非常不同。有疑問時，最好的方式就是在行動裝置上執行網頁。網頁程式碼實際上是在行動裝置上執行時，您可以利用遠端偵錯功能，透過筆記型電腦或桌上型電腦查看、變更、偵錯及剖析網頁程式碼。
開啟裝置工具列
如要開啟裝置工具列，請按照下列步驟操作：
- 開啟開發人員工具。
- 在頂端動作列中，按一下「裝置工具列」「切換裝置工具列」。
模擬行動版可視區域
根據預設，裝置工具列會以可視區域開啟，「尺寸」設為「回應式」。 使用「維度」下拉式選單，您可以模擬特定行動裝置的尺寸。
回應式可視區域模式
拖曳控點，即可視需要調整可視區域的大小。或是在寬度和高度方塊中輸入特定值在此範例中，寬度設為 480，高度設定為 415。
或者，您也可以使用寬度預設列，按一下下列任一選項來設定寬度：
| 行動裝置 S | 行動裝置 M | 行動裝置 L | 平板電腦 | 筆記型電腦 | 筆電 L | 4K |
|---|---|---|---|---|---|---|
| 320 像素 | 375 像素 | 425 像素 | 768 像素 | 1024 像素 | 1440 像素 | 2560 像素 |
顯示媒體查詢
如要在可視區域上方顯示媒體查詢中斷點，請依序點選 
「更多選項」 >「顯示媒體查詢」。
開發人員工具現在會在可視區域上方另外顯示兩個長條：
- 包含
max-width中斷點的藍色列。 - 含有
min-width中斷點的橘色長條。
在中斷點之間按一下，即可變更可視區域的寬度，以便觸發中斷點。
如要找出對應的 @media 宣告，請在中斷點之間按一下滑鼠右鍵，然後選取「顯示原始碼」。開發人員工具會在「Editor」的對應行中開啟「Sources」面板。
設定裝置像素比例
裝置像素比例 (DPR) 是指硬體螢幕實體像素與邏輯 (CSS) 像素之間的比率。也就是說，DPR 會告訴 Chrome 要使用多少螢幕像素來繪製 CSS 像素。在 HiDPI (高點每英寸) 螢幕上繪圖時，Chrome 會使用 DPR 值。
如要設定 DPR 值，請按照下列步驟操作：
依序點選「更多選項」圖示
>「新增裝置像素比例」。
在可視區域頂端的動作列中，從新的「DPR」下拉式選單中選取 DPR 值。
設定裝置類型
使用「裝置類型」清單模擬行動裝置或電腦裝置。
如果在頂端的動作列中找不到清單，請依序選取「更多選項」圖示 
>「新增裝置類型」。
下表說明兩者的不同之處。轉譯方式是指 Chrome 會將網頁轉譯為行動裝置或電腦的可視區域。遊標圖示是指將滑鼠遊標懸停在頁面上時看到的遊標類型。「事件觸發」是指您與網頁互動時，頁面是否會觸發 touch 或 click 事件。
| 選項 | 顯示方法 | 遊標圖示 | 已觸發事件 |
|---|---|---|---|
| 行動裝置 | 行動裝置 | 畫圈 | 觸控輸入 |
| 行動裝置 (非觸控) | 行動裝置 | 正常 | click |
| 電腦 | 電腦 | 正常 | click |
| 電腦 (觸控式) | 電腦 | 畫圈 | 觸控輸入 |
裝置專用模式
如要模擬特定行動裝置的尺寸，請從「維度」清單中選取裝置。
詳情請參閱新增自訂行動裝置。
將可視區域旋轉為橫向
按一下「screen_rotation」screen_rotation「旋轉」，將可視區域旋轉為橫向。
請注意，如果「裝置工具列」縮小，「旋轉」
按鈕會消失。
另請參閱「設定方向」。
切換雙螢幕模式
部分裝置 (例如 Surface Duo) 會提供兩個螢幕和兩種使用方式：其中一個畫面處於啟用狀態，或是兩個畫面處於啟用狀態。
如要切換雙螢幕模式和單螢幕模式，請按一下工具列中的 devices_fold 切換雙螢幕模式。
設定裝置型態
部分裝置 (例如 Asus Zenbook Fold) 擁有折疊式螢幕。這類螢幕的型態是連續或摺疊。連續型態是指「平板」位置，而摺疊在螢幕各節之間形成一個角度。
如要設定裝置型態，請在工具列的對應下拉式選單中選取「連續」或「摺疊」。
顯示裝置邊框
在模擬特定行動裝置 (例如 Nest Hub) 的尺寸時，請依序選取「更多選項」圖示 
>「顯示裝置頁框」，即可在可視區域周圍顯示實體裝置頁框。
在這個例子中，開發人員工具會顯示 Nest Hub 的影格。
新增自訂行動裝置
如何新增自訂裝置：
按一下「裝置」清單，然後選取「編輯」。
前往「設定」 >「裝置」分頁，從支援裝置清單中選擇裝置，或是按一下「新增自訂裝置」新增您的裝置。
如要新增自訂裝置，請輸入裝置名稱、寬度和高度，然後按一下「新增」。
返回可視區域，從「維度」清單中選取新增的裝置。
顯示尺規
依序按一下「更多選項」圖示 
>「顯示尺規」即可查看尺規。尺規的大小單位為像素。
開發人員工具會在可視區域的頂端和左側顯示尺規。
按一下特定標記的尺規，以設定可視區域的寬度和高度。
縮放可視區域
使用「縮放」清單來放大或縮小。
擷取螢幕截圖
如要擷取可視區域顯示的螢幕截圖，請依序點選 
「更多選項」 >「擷取螢幕截圖」。
如要擷取整個網頁的螢幕截圖 (包括無法在可視區域顯示的內容)，請在同一個選單中選取「擷取完整大小的螢幕截圖」。
限制網路和 CPU
若要同時調節網路和 CPU，請從「Throttle」清單中選取「Mid-tier mobile」或「Low-end mobile」。
中階行動裝置會模擬快速的 3G 網路並節流 CPU，因此速度比一般慢 4 倍。低階行動裝置會模擬 3G 速度緩慢情形，並將 CPU 節流速度比平常慢 6 倍。請注意，節流與筆電或桌上型電腦的正常功能有關。
請注意，如果裝置工具列範圍縮小，系統會隱藏「Throttle」清單。
僅限制 CPU
如果只要限制 CPU 數量而不限制網路，請前往「Performance」面板，按一下「Capture Settings」圖示 
，然後從「CPU」清單中選取「4 倍速度緩慢」、「6 倍慢速」或「速度達 20 倍」。
僅節流網路
如果只要限制網路數量，而不限制 CPU，請前往「Network」(網路) 面板，然後在「Throttle」清單中選取「Fast 3G」或「Slow 3G」。
或者按下 Command + Shift + P 鍵 (Mac) 或 Control + Shift + P 鍵 (Windows、Linux 和 ChromeOS)，開啟指令選單，輸入 3G，然後選取「啟用快速 3G 節流功能」或「啟用慢速 3G 節流」。
你也可以透過「Performance」面板設定網路節流功能。按一下「Capture Settings」圖示 
，然後從「Network」清單中選取「Fast 3G」或「Slow 3G」。
模擬感應器
使用「Sensors」面板覆寫地理位置、模擬裝置螢幕方向、強制觸碰及模擬閒置狀態。
以下各節將說明如何覆寫地理位置並設定裝置方向。如需完整功能清單，請參閱「模擬裝置感應器」一文。
覆寫地理位置
如要開啟地理位置覆寫 UI，請按一下「Customize and Control DevTools」圖示 
，然後依序選取「More tools」 >「Sensors」。
或者按下 Command+Shift+P 鍵 (Mac) 或 Control+Shift+P 鍵 (Windows、Linux、ChromeOS) 開啟指令選單，輸入 Sensors，然後選取「Show Sensors」。
從「Location」(位置) 清單中選取其中一個預設設定，或是選取「Other...」(其他...) 自行輸入座標，或是選取「無法使用位置」來測試網頁在地理位置處於錯誤狀態時的行為。
設定方向
如要開啟螢幕方向 UI，請按一下「Customize and Control DevTools」圖示 
，然後依序選取「More tools」 >「Sensors」。
或者按下 Command+Shift+P 鍵 (Mac) 或 Control+Shift+P 鍵 (Windows、Linux、ChromeOS) 開啟指令選單，輸入 Sensors，然後選取「Show Sensors」。
從「Orientation」清單中選取其中一個預設項目，或選取「Custom 以下內容」，自行設定 Alpha 版、Beta 版和 Gamma 值。
