使用裝置模式模擬行動裝置

使用裝置模式，模擬網頁在行動裝置上的外觀和效能。

總覽

裝置模式是 Chrome 開發人員工具中的功能集名稱，可協助您模擬行動裝置。這些功能包括：

• 模擬行動裝置的檢視區塊
• 進行 CPU 節流
• 節流網路
• 此外，在「感應器」面板中：
  • 模擬地理位置
  • 設定螢幕方向

限制

您可以將裝置模式視為一階近似值，瞭解網頁在行動裝置上的外觀和操作體驗。使用裝置模式時，您實際上不會在行動裝置上執行程式碼。您可以在筆電或桌機上模擬行動裝置使用者體驗。

開發人員工具永遠無法模擬行動裝置的某些方面。舉例來說，行動裝置 CPU 的架構與筆電或桌機 CPU 的架構大不相同。如有疑問，建議您在行動裝置上實際執行網頁，使用遠端偵錯功能，即可在筆電或桌機上查看、變更、偵錯及剖析網頁的程式碼，同時在行動裝置上實際執行網頁。

開啟裝置工具列

如要開啟裝置工具列，請按照下列步驟操作：

1. 開啟開發人員工具。
2. 按一下頂端動作列中的「裝置」 「切換裝置工具列」。

模擬行動裝置可視區域

裝置工具列預設會在可視區域中開啟，且「尺寸」設為「回應式」。使用「尺寸」下拉式選單，可以模擬特定行動裝置的尺寸。

回應式可視區域模式

拖曳控點，將可視區域調整為所需大小。或者，在寬度和高度方塊中輸入特定值。在本範例中，寬度設為 480，高度設為 415。

你也可以使用寬度預設集列，按一下下列其中一個選項來設定寬度：

小型行動裝置	中型行動裝置	大型行動裝置	平板電腦	筆記型電腦	大型筆電	4K
320px	375px	425px	768 像素	1024px	1440 像素	2560 像素

顯示媒體查詢

如要在視埠上方顯示媒體查詢中斷點，請依序點選「更多選項」圖示 「顯示媒體查詢」。

開發人員工具現在會在檢視區塊上方顯示兩條額外橫條：

• 藍色長條，包含 max-width 個中斷點。
• 橘色長條，包含 min-width 個中斷點。

點選中斷點之間的區域，即可變更可視區域的寬度，觸發中斷點。

如要找出對應的 @media 宣告，請在兩個中斷點之間按一下滑鼠右鍵，然後選取「Reveal in source code」。開發人員工具會在「編輯器」中，於對應行開啟「來源」面板。

設定裝置像素比例

裝置像素比例 (DPR) 是指硬體螢幕上的實體像素與邏輯 (CSS) 像素之間的比例。換句話說，DPR 會告訴 Chrome 要使用多少螢幕像素來繪製 CSS 像素。Chrome 在 HiDPI (每英吋高點數) 螢幕上繪製時，會使用 DPR 值。

如要設定 DPR 值，請按照下列步驟操作：

1. 依序點選「更多選項」「新增裝置像素比例」。

   

2. 在檢視區塊頂端的動作列中，從新的「DPR」DPR下拉式選單中選取 DPR 值。

   

設定裝置類型

使用「裝置類型」清單模擬行動裝置或電腦。

如果頂端動作列未顯示清單，請依序選取「更多選項」「新增裝置類型」。

下表說明各選項的差異。「算繪方法」是指 Chrome 將網頁算繪為行動版或電腦版檢視區塊。「游標圖示」是指將滑鼠游標懸停在網頁上時，顯示的游標類型。「觸發的事件」是指與網頁互動時，網頁是否會觸發 touch 或 click 事件。

選項	算繪方法	游標圖示	觸發的事件
行動裝置	行動裝置	圓形	觸控輸入
行動裝置 (無觸控功能)	行動裝置	一般	click
電腦	電腦	一般	click
電腦 (觸控)	電腦	圓形	觸控輸入

裝置專屬模式

如要模擬特定行動裝置的尺寸，請從「尺寸」清單中選取裝置。

詳情請參閱「新增自訂行動裝置」。

將檢視區塊旋轉為橫向

按一下 screen_rotation Rotate，將檢視區塊旋轉為橫向模式。

請注意，如果裝置工具列很窄，「旋轉」 按鈕就會消失。

另請參閱「設定螢幕方向」。

切換雙螢幕模式

部分裝置 (例如 Surface Duo) 有兩個螢幕，可選擇啟用一個或兩個螢幕。

如要在雙螢幕和單螢幕之間切換，請按一下工具列中的 devices_fold「切換雙螢幕模式」。

設定裝置型態

部分裝置 (例如 Asus Zenbook Fold) 採用可折疊螢幕。這類螢幕的姿勢分為「連續」或「摺疊」。「連續」是指「平坦」位置，而「摺疊」則是指螢幕各部分之間的角度。

如要設定裝置姿勢，請從工具列中對應的下拉式選單選取「Continuous」(連續) 或「Folded」(摺疊)。

顯示裝置邊框

如要模擬特定行動裝置 (例如 Nest Hub) 的尺寸，請選取「更多選項」 >「顯示裝置外框」，在檢視區塊周圍顯示實體裝置外框。

在本例中，開發人員工具會顯示 Nest Hub 的影格。

新增自訂行動裝置

如何新增自訂裝置：

1. 按一下「裝置」清單，然後選取「編輯」。

   

2. 依序前往「設定」「裝置」分頁，從支援的裝置清單中選擇裝置，或按一下「新增自訂裝置」來新增裝置。

3. 如要自行新增，請輸入裝置名稱、寬度和高度，然後按一下「新增」。

   

   裝置像素比例、使用者代理程式字串和裝置類型欄位為選填欄位。裝置類型欄位是預設設為「行動裝置」的清單。

4. 返回檢視區塊，從「尺寸」清單中選取新加入的裝置。

顯示尺規

依序點選「更多選項」 >「顯示尺規」，即可查看尺規。尺規的尺寸單位為像素。

開發人員工具會在可視區域的頂端和左側顯示尺規。

點選特定標記的尺規，即可設定可視區域的寬度和高度。

縮放可視區域

使用「縮放」清單放大或縮小。

擷取螢幕截圖

如要擷取視埠中顯示內容的螢幕截圖，請依序點選「更多選項」圖示 >「擷取螢幕截圖」。

如要擷取整個網頁的螢幕截圖，包括視埠中未顯示的內容，請從同一個選單中選取「擷取完整大小的螢幕截圖」。

如要在特定裝置模式下擷取螢幕截圖時加入裝置外框，請先顯示裝置外框，然後按照先前的指示點選「擷取螢幕截圖」。

如要瞭解使用開發人員工具拍攝螢幕截圖的其他方式，請參閱「使用開發人員工具拍攝螢幕截圖的 4 種方式」。

節流網路和 CPU

如要限制網路和 CPU，請從「Throttle」(限制) 清單中選取「Mid-tier mobile」(中階行動裝置) 或「Low-end mobile」(低階行動裝置)。

中階行動裝置會模擬快速 3G，並將 CPU 節流至正常速度的 1/4。低階行動裝置：模擬緩慢的 3G 網路，並將 CPU 速度調慢 6 倍。請注意，節流是相對於筆電或桌機的正常功能。

請注意，如果裝置工具列較窄，系統會隱藏「節流」清單。

僅節流 CPU

如要只節流 CPU 而不節流網路，請前往「效能」面板，按一下「擷取設定」，然後從「CPU」清單中選取「4 倍減速」、「6 倍減速」或「20 倍減速」。

僅節流網路

如要只限制網路速度，而不限制 CPU，請前往「Network」面板，然後從「Throttle」清單中選取「Fast 3G」或「Slow 3G」。

或者，按下 Command+Shift+P 鍵 (Mac) 或 Control+Shift+P 鍵 (Windows、Linux、ChromeOS) 開啟「命令選單」，輸入 3G，然後選取「啟用快速 3G 節流」或「啟用慢速 3G 節流」。

您也可以從「效能」面板設定網路節流。按一下「擷取設定」，然後從「網路」清單中選取「Fast 3G」或「Slow 3G」。

模擬感應器

使用「感應器」面板覆寫地理位置、模擬裝置方向、強制觸控及模擬閒置狀態。

接下來的章節會簡要說明如何覆寫地理位置，以及設定裝置方向。如需完整的功能清單，請參閱「模擬裝置感應器」。

覆寫地理位置

如要開啟地理位置覆寫使用者介面，請按一下「自訂及控制開發人員工具」，然後依序選取「更多工具」 >「感應器」。

或者，按下 Command+Shift+P 鍵 (Mac) 或 Control+Shift+P 鍵 (Windows、Linux、ChromeOS) 開啟「Command Menu」，輸入 Sensors，然後選取「Show Sensors」。

從「位置」清單中選取其中一個預設值，或選取「其他...」輸入自己的座標，或選取「位置資訊無法使用」，測試網頁在地理位置資訊處於錯誤狀態時的行為。

設定螢幕方向

如要開啟方向使用者介面，請依序點選「自訂及控制開發人員工具」、「更多工具」和「感應器」。

或者，按下 Command+Shift+P 鍵 (Mac) 或 Control+Shift+P 鍵 (Windows、Linux、ChromeOS) 開啟「Command Menu」，輸入 Sensors，然後選取「Show Sensors」。

從「方向」清單中選取其中一個預設值，或選取「自訂方向」來設定自己的 Alpha、Beta 和 Gamma 值。