如何在 PC 上切換到智能手機視圖 – Chrome Edge Firefox

本文推薦給以下人群：

• 想要使用 Chrome 將網站切換到智能手機顯示的用戶
• 想要使用 Microsoft Edge 將網站切換到智能手機顯示的用戶
• 想要使用 Firefox 將網站切換到智能手機顯示的用戶

在本文中，我們將詳細說明如何使用 PC 瀏覽器打開智能手機頁面。

這是任何運行網站的人都應該牢記的功能。

目錄

我們將詳細說明如何使用據說擁有最多用戶的 Google Chrome 將您在 PC 上查看的網站切換到智能手機顯示屏。

步按鍵盤上的 F12 打開開發者工具

使用 Google Chrome 作為活動窗口，鍵盤F12請按

活動窗口是顯示在PC屏幕最前面並且可以操作的窗口。
反之，顯示在前面以外的位置且無法操作的窗口稱為非活​​動窗口。

按鍵盤上的 F12 打開開發者工具

鍵盤F12當您按 時，開發者工具將在 Google Chrome 右側打開，如下圖所示。

鍵盤快捷鍵：按 F12 或 Ctrl + Shift + I（在 Mac 上按 Command + Option + I）。

下圖中紅框包圍的區域就是開發者工具。

開發者工具是一項可讓您輕鬆分析網站內容和資源的功能。

按鍵盤上的 F12 打開開發者工具

步單擊開發者工具中的手機圖標切換到手機視圖

開發者工具打開後，在開發者工具的左上角單擊描繪智能手機和平板電腦的圖標請。

單擊後，左側屏幕將切換為智能手機顯示，如紅框所示。

當前分辨率顯示在其上方的藍色框中，在下圖中，它看起來像 460 x 1213。

這裡顯示的數字是點（CSS 像素）。
請注意，1pt 是 1 英寸的 1/72，這與像素完全不同。

單擊開發人員工具的智能手機圖標

再次單擊帶有智能手機和平板電腦圖表的圖標可返回 PC 顯示屏。

選擇設備並更改顯示尺寸

在開發者工具中，根據設備（型號）提前準備好尺寸（點），還可以檢查諸如“在iPhone 12 Pro上將如何顯示？”之類的內容。

截至 2024 年 6 月 26 日，它還兼容 iPhone 14 Pro Max 和 Galaxy S20 Ultra 等設備。

在開發者工具中切換到智能手機視圖後，在左上角單擊[尺寸：響應式]請。

當您單擊[Dimensions: Responsive]時，下拉菜單將向底部展開。

在展開的菜單中，將顯示各種型號名稱，從 Android 終端到 iPhone 和 iPad，因此請選擇您要檢查的設備（型號）。
屏幕尺寸將根據所選設備（型號）進行調整。

選擇設備並更改顯示分辨率

如果您要查看的設備（型號）不在該下拉菜單中，請單擊下拉菜單底部的按鈕。單擊編輯請。

選擇設備並更改顯示分辨率

單擊“編輯”，您將在屏幕左側看到“模擬設備”。

其中，展示了許多此前未展示的設備（型號）。

選擇設備並更改顯示分辨率

顯示在“模擬設備”中檢查設備名稱（型號名稱）該模型將添加到左側的尺寸中。

在下圖中，檢查並添加了 iPhone X。

選擇設備並更改顯示分辨率

現在您可以檢查 iPhone X 的屏幕顯示。

如果您要選擇的型號在仿真設備中不可用

如果您要選擇的型號在仿真設備中不可用，單擊添加自定義設備然後您就可以註冊了。

在紅框中輸入需要的項目，點擊Add進行添加。

如果您要選擇的型號在仿真設備中不可用

有關 iPhone 屏幕尺寸（CSS 像素）的信息，請參閱以下網站。

吃

iPhone 屏幕尺寸和像素數快速參考表 – Qiita
*截至2023年7月31日更新至iOS16.6 我們正在招募！ GENZ Co., Ltd.提供軟件測試服務。我們還正在招聘職業生涯中期...

如何將 Chrome 開發者工具本地化為日語

Chrome 的開發者工具默認設置為英語，但您可以按照以下步驟更改設置，輕鬆將其更改為日語。

1. 單擊開發者工具右上角的齒輪圖標
2. 語言選擇[日語-日語]
3. 滾動到底部並單擊“恢復默認值並重新加載”
4. 點擊“始終匹配 Chrome 的語言”

從這裡開始，我將用易於理解的方式解釋如何使用實際屏幕將 Chrome 的開發者工具本地化為日語。

步單擊開發者工具右上角的齒輪圖標

一、在開發者工具右上角單擊齒輪圖標請。

如何將 Chrome 開發者工具本地化為日語

步語言選擇[日語-日語]

當您單擊齒輪圖標時，帶有大文本設置的開發者工具設置屏幕將出現在Chrome右側。

裡面的語言裡選擇[日語-日語]請。

如何將 Chrome 開發者工具本地化為日語

步滾動到底部並單擊“恢復默認值並重新加載”

選擇【日語-日語】後，滾動到底部並選擇單擊恢復默認值並重新加載請。

如何將 Chrome 開發者工具本地化為日語

步點擊“始終匹配 Chrome 的語言”

當您點擊“恢復默認值並重新加載”時，屏幕將刷新，您將在右側看到三個選項：“始終匹配 Chrome 的語言”、“將 DevTools 切換為日語”和“不再顯示”。

如果您使用日語版本的 Chrome點擊“始終匹配 Chrome 的語言”請。

如果您使用日語以外的語言使用 Chrome，請單擊 [將開發工具切換為日語] 將開發者工具本地化為日語。

如何將 Chrome 開發者工具本地化為日語

步確認開發者工具已本地化為日語

當您點擊[始終匹配 Chrome 的語言]時，屏幕將更新，開發者工具將本地化為日語，如下圖所示。

如何將 Chrome 開發者工具本地化為日語

如何使用 Microsoft Edge 將網站切換到智能手機視圖

接下來，我們將詳細介紹如何使用 Microsoft Edge 將您在 PC 上查看的網站切換到智能手機視圖。

步按鍵盤上的 F12 打開 DevTools

使用 Microsoft Edge 作為活動窗口，鍵盤F12請按

活動窗口是顯示在PC屏幕最前面並且可以操作的窗口。
反之，顯示在前面以外的位置且無法操作的窗口稱為非活​​動窗口。

按鍵盤上的 F12 打開 DevTools

鍵盤F12當您按下 時，Microsoft Edge 右側會出現一個屏幕，顯示“您要打開 Microsoft Edge 開發人員工具嗎？”

它在底部單擊打開開發工具請。

為了防止下次出現此消息，請選中“記住我的決定”並單擊“打開 DevTools”。

按鍵盤上的 F12 打開 DevTools

步單擊 DevTools 智能手機圖標切換到智能手機視圖

當您單擊“打開 DevTools”時，Microsoft Edge 右側將出現一個屏幕，顯示“歡迎使用 Microsoft Edge DevTools”。

這是最重要的單擊智能手機和平板電腦圖標請。

當你點擊它時，左側的屏幕將切換到智能手機顯示，就像魷魚圖像中的紅框一樣。

當前分辨率顯示在其上方的藍色框中，在下圖中，它看起來像 599 x 458。

這裡顯示的數字是點（CSS 像素）。
請注意，1pt 是 1 英寸的 1/72，這與像素完全不同。

單擊 DevTools 智能手機圖標

選擇設備並更改顯示尺寸

在 Microsoft Edge 的 DevTools 中，根據設備（型號）提前準備好尺寸（點），您還可以檢查諸如“它將如何在 iPhone 12 Pro 上顯示？”之類的內容。

截至 2024 年 6 月 26 日，它還兼容 iPhone 14 Pro Max 和 Galaxy S20 Ultra 等設備。

在開發者工具中切換到智能手機視圖後，在左上角點擊維度：響應式請。

當您單擊[維度：響應式]時，下拉菜單將向底部展開。

在展開的菜單中，將顯示各種型號名稱，從 Android 終端到 iPhone 和 iPad，因此請選擇您要檢查的設備（型號）。屏幕尺寸將根據所選設備（型號）進行調整。

選擇設備並更改顯示尺寸

如果您要查看的設備（型號）不在該下拉菜單中，請單擊下拉菜單底部的按鈕。單擊編輯請。

選擇設備並更改顯示尺寸

單擊【編輯】後，Microsoft Edge 右側將顯示下圖中紅框包圍的“模擬設備”列表。
其中，展示了許多此前未展示的設備（型號）。

選擇設備並更改顯示尺寸

如果檢查“模擬設備”中顯示的設備名稱（型號名稱），該型號將被添加到左側的[Dimension: Responsive]中。

在下圖中，檢查並添加了 iPhone X。

選擇設備並更改顯示尺寸

現在您可以檢查 iPhone X 屏幕尺寸的顯示。

如果在仿真設備中沒有找到您要選擇的型號

如果仿真設備中沒有您要選擇的型號，您可以通過點擊【添加自定義設備】進行註冊。

在紅框中輸入需要的項目，點擊Add進行添加。

如果您要選擇的型號在仿真設備中不可用

有關 iPhone 屏幕尺寸（CSS 像素）的信息，請參閱以下網站。

吃

iPhone 屏幕尺寸和像素數快速參考表 – Qiita
*截至2023年7月31日更新至iOS16.6 我們正在招募！ GENZ Co., Ltd.提供軟件測試服務。我們還正在招聘職業生涯中期...

如何使用 Firefox 將網站切換到移動視圖

接下來，我們將詳細說明如何使用 Firefox 將網站切換到智能手機視圖。

步按鍵盤上的 F12 打開開發者工具屏幕

以 Firefox 作為活動窗口，鍵盤F12請按

活動窗口是顯示在PC屏幕最前面並且可以操作的窗口。
反之，顯示在前面以外的位置且無法操作的窗口稱為非活​​動窗口。

按鍵盤上的 F12 打開開發者工具屏幕

步單擊開發工具中的智能手機圖標，切換到智能手機視圖。

當您按下鍵盤上的 F12 鍵時，開發人員工具將出現在 Firefox 屏幕的下半部分。

開發者工具右側單擊智能手機和平板電腦圖標（響應式設計模式）請。

鍵盤控制鍵+轉移+中號您還可以通過按 切換到響應式設計模式。

單擊開發工具中的智能手機圖標，切換到智能手機視圖。

單擊後，左側屏幕將切換為智能手機顯示，如紅框所示。

當前分辨率顯示在其上方的藍色框中，在下圖中，它看起來像 320 x 480。

這裡顯示的數字是點（CSS 像素）。
請注意，1pt 是 1 英寸的 1/72，這與像素完全不同。

單擊開發工具中的智能手機圖標，切換到智能手機視圖。

如果開發工具畫面難以使用

Firefox 開發者工具屏幕的頂部是屏幕顯示，底部是開發工具。

在智能手機上觀看時，通常是垂直方向，因此在這種狀態下可能很難看清。

在這種情況下，您可以通過單擊開發工具右下角的[三點引線]來更改顯示。

如果開發工具畫面難以使用

選擇設備並更改顯示尺寸

Firefox開發工具有根據設備（型號）提前準備好的尺寸（點），還可以檢查諸如“在iPhone 12 Pro上將如何顯示？”之類的內容。

在開發工具中切換到智能手機顯示後，在左上角點擊【回复】請。

當您單擊[響應式]時，下拉菜單將向底部展開。

在展開的菜單中，將顯示各種型號名稱，從 Android 終端到 iPhone 和 iPad，因此請選擇您要檢查的設備（型號）。屏幕尺寸將根據所選設備（型號）進行調整。

選擇設備並更改顯示尺寸

如果您要查看的設備（型號）不在該下拉菜單中，請單擊下拉菜單底部的按鈕。單擊編輯列表請。

選擇設備並更改顯示尺寸

單擊[編輯列表]可顯示在 Firefox 中註冊的設備（型號）列表。
其中，展示了許多此前未展示的設備（型號）。

選擇設備並更改顯示尺寸

顯示的檢查設備名稱（型號名稱）請。

選擇設備並更改顯示尺寸

選中後，模型將添加到下拉菜單中。

推薦閱讀：Google Analytics – 將我排除在訪問之外 禁用數據收集的附加組件 – Chrome – Firefox – Internet Explorer – Safari

選擇設備並更改顯示尺寸

您現在可以檢查您檢查的設備（型號）的屏幕尺寸。

常問問題

即使切換到設備模式後，屏幕也無法正常顯示。

如果切換到設備模式後屏幕仍無法正常顯示，請轉動屏幕F5請嘗試重新加載。

有沒有辦法同時查看網頁在哪些設備上的外觀？

通過打開多個瀏覽器窗口或選項卡並在不同的設備模式下查看它們，您可以同時查看它在多個設備上的外觀。

有沒有辦法在設備模式下的智能手機上的縱向和橫向顯示之間切換？

在設備模式下單擊屏幕頂部的旋轉圖標可在縱向和橫向顯示之間切換。

如何在設備模式下清除緩存？

您可以通過單擊開發人員工具頂部的 [>>]，選擇“網絡”選項卡並選中“禁用緩存”來禁用頁面重新加載時的緩存。

有沒有辦法改變設備模式下網頁的顯示放大倍數？

您可以在設備模式下使用屏幕頂部的縮放控件（例如 100%）更改顯示放大倍率。

我可以在設備模式下進行網站速度測試嗎？

點擊開發者工具頂部>>，選擇網絡選項卡，點擊Wifi圖標（其他網絡狀態）。
您可以通過網絡狀態中的【網絡限制】預設高速3G、低速3G等網絡條件。

每次我錯誤地按 F12 時，開發人員工具都會打開，這很煩人。有辦法禁用它嗎？

無法從瀏覽器禁用開發人員工具。
如何禁用 NumLock 和 Insert 鍵我們建議使用 中介紹的方法禁用 F12 鍵本身。

有關 Google Chrome、Microsoft Edge 和 Firefox 的其他文章

單擊此處查看有關 Google Chrome、Microsoft Edge 和 Firefox 的其他文章。請看一下。