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

Sofia Emelianova
Sofia Emelianova

使用裝置模式即可估算網頁在行動裝置上的外觀和效能。

總覽

裝置模式是 Chrome 開發人員工具的一系列功能名稱 模擬行動裝置這些功能包括:

限制

裝置模式就像是第一順位,您網頁的外觀和風格 使用行動裝置在裝置模式下,您不必在行動裝置上執行程式碼,您模擬 都能在筆電或桌機中流暢執行行動使用者體驗

開發人員工具無法模擬行動裝置的某些部分。例如: 行動 CPU 的架構與筆電或電腦 CPU 的架構截然不同 有疑問時,最好的方式就是在行動裝置上執行網頁。使用 Remote 偵錯時,在筆電或電腦上查看、變更、偵錯及剖析網頁程式碼 其實是在行動裝置上執行

開啟裝置工具列

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

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

裝置工具列切換鈕

模擬行動版可視區域

根據預設,裝置工具列會以可視區域開啟,「尺寸」設為「回應式」。 使用「維度」下拉式選單,您可以模擬特定行動裝置的尺寸

裝置工具列。

回應式可視區域模式

拖曳控點,即可視需要調整可視區域的大小。或者,輸入特定值 設定方塊在此範例中,寬度設為 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 值,請按照下列步驟操作:

  1. 按一下「更多選項」圖示 更多選項。 >增加裝置像素比例

    新增裝置像素比例。

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

    設定 DPR 值。

設定裝置類型

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

裝置類型清單。

如果在頂端的動作列中找不到清單,請選取「更多選項」圖示 更多選項。 >新增裝置類型

下表說明兩者的不同之處。轉譯方法指的是 Chrome 會將網頁轉譯為行動裝置或電腦的可視區域。遊標圖示是指類型 您就會看到滑鼠遊標「事件觸發」是指網頁是否觸發 touchclick 事件。

選項顯示方法遊標圖示已觸發事件
行動裝置行動裝置圓形觸控輸入
行動裝置 (非觸控)行動裝置一般click
電腦電腦一般click
電腦 (觸控式)電腦圓形觸控輸入

裝置專用模式

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

維度清單。

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

將可視區域旋轉為橫向

按一下「screen_rotation」screen_rotation「旋轉」,將可視區域旋轉為橫向。

橫向。

請注意,如果「裝置工具列」縮小,「旋轉」旋轉。 按鈕會消失。

裝置工具列。

另請參閱「設定方向」。

切換雙螢幕模式

部分裝置 (例如 Surface Duo) 會提供兩個螢幕和兩種使用方式:其中一個畫面處於啟用狀態,或是兩個畫面處於啟用狀態。

如要切換雙螢幕模式和單螢幕模式,請按一下工具列中的 devices_fold 切換雙螢幕模式

雙螢幕模式已開啟。

設定裝置型態

部分裝置 (例如 Asus Zenbook Fold) 擁有折疊式螢幕。這類螢幕的型態是連續或摺疊。持續態勢所指的「平板」位置和折疊位置形成一個在螢幕各部分之間形成的角度。

如要設定裝置型態,請在工具列的對應下拉式選單中選取「連續」或「摺疊」

已將防護機制設為摺疊。

顯示裝置邊框

在模擬特定行動裝置 (例如 Nest Hub) 的尺寸時,選取「更多選項」圖示 更多選項。 >顯示裝置頁框,在可視區域周圍顯示實體裝置外框。

顯示裝置外框。

在這個例子中,開發人員工具會顯示 Nest Hub 的影格。

Nest Hub 的裝置外框。

新增自訂行動裝置

如何新增自訂裝置:

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

    。

  2. 前往「設定」設定 >「裝置」分頁,從支援裝置清單中選擇裝置,或按一下「新增自訂裝置」新增一部裝置。

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

    建立自訂裝置。

    裝置像素比率使用者代理程式字串裝置類型為選填欄位。裝置類型欄位預設為「行動裝置」

  4. 返回可視區域,從「維度」清單中選取新增的裝置。

顯示尺規

按一下「更多選項」圖示 更多選項。 >顯示尺規即可查看尺規。尺規的大小單位為像素。

顯示尺規。

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

可視區域上方和左側的尺規。

按一下特定標記的尺規,以設定可視區域的寬度和高度。

縮放可視區域

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

。

擷取螢幕截圖

如要擷取可視區域顯示的螢幕截圖,請按一下 更多選項。「More options」(更多選項) >擷取螢幕截圖

「更多選項」選單中的「擷取螢幕截圖」選項。

如要擷取整個網頁的螢幕截圖 (包括無法在可視區域顯示的內容),請在同一個選單中選取「擷取完整大小的螢幕截圖」

如要在特定裝置模式中擷取螢幕截圖時加入裝置頁框,請先顯示裝置頁框,再按照上述指示按一下「擷取螢幕截圖」

擷取有裝置邊框的螢幕截圖。

如要瞭解使用開發人員工具擷取螢幕截圖的其他方式,請參閱「使用開發人員工具擷取螢幕截圖的 4 種方式」一文。

限制網路和 CPU

如要同時限制網路和 CPU 數量,請從下列項目中選取「中階行動裝置」或「低端行動裝置」Throttle 清單。

節流清單。

中階行動裝置會模擬快速的 3G 網路並節流 CPU,將 CPU 速度低於 4 倍 一般。低階行動裝置會模擬 3G 速度緩慢情形,並將 CPU 節流速度比平常慢 6 倍。保留 請記住,節流與筆電或桌上型電腦的正常功能有關。

請注意,如果裝置工具列範圍縮小,系統會隱藏「Throttle」清單。

僅限制 CPU

如果只要限制 CPU 而非網路效能,請前往效能面板,按一下擷取 設定 。,以及 然後從 CPU 清單中選取「4 倍速度緩慢」、「6 倍減速」或「20 倍減速」

CPU 清單。

僅節流網路

如果只要限制網路數量,而不限制 CPU,請前往「網路」面板並選取「Fast 3G」或 「Throttle」清單中的「Slow 3G」

節流清單。

按下 Command + Shift + P 鍵 (Mac) 或 Control + Shift + P 鍵 (Windows、Linux、ChromeOS) 則可開啟指令 選單並輸入 3G,然後選取「啟用快速 3G 節流功能」或「啟用慢速 3G 節流」

指令選單。

你也可以透過「Performance」面板設定網路節流功能。按一下「擷取設定」 。,然後選取 「Fast 3G」(快速 3G) 或「Slow 3G」(慢 3G)。

透過「效能」面板設定網路節流。

模擬感應器

使用「Sensors」面板覆寫地理位置、模擬裝置螢幕方向、強制觸碰及模擬閒置狀態。

以下各節將說明如何覆寫地理位置並設定裝置方向。如需完整功能清單,請參閱「模擬裝置感應器」一文。

覆寫地理位置

如要開啟地理位置覆寫 UI,請按一下「Customize and Control DevTools」自訂及管理開發人員工具。,然後選取「更多工具」>感應器

感應器

按下 Command + Shift + P 鍵 (Mac) 或 Control + Shift + P 鍵 (Windows、Linux、ChromeOS) 則可開啟指令 選單,輸入 Sensors,然後選取「Show Sensors」

顯示感應器

從「Location」(位置) 清單中選取一個預設選項,或「Other...」(其他...) 輸入 座標,或選取「無法取得位置資訊」,即可測試網頁在 地理位置處於錯誤狀態

地理位置

設定方向

如要開啟螢幕方向 UI,請按一下「Customize and Control DevTools」自訂及管理開發人員工具。,然後選取「更多工具」>感應器

感應器

按下 Command + Shift + P 鍵 (Mac) 或 Control + Shift + P 鍵 (Windows、Linux、ChromeOS) 則可開啟指令 選單,輸入 Sensors,然後選取「Show Sensors」

顯示感應器

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

方向