使用裝置模式即可估算網頁在行動裝置上的外觀和效能。
總覽
裝置模式是 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 值。