如何在 Chrome、Firefox、Edge 和 Opera 中使用移動瀏覽器模擬器

您是否需要在 PC 上訪問智能手機瀏覽器模擬器來測試您感興趣的網站的移動版本?也許您是一名 Web 開發人員,或者您想成為一名 Web 開發人員,並且您需要為您正在從事的項目模擬移動瀏覽器。無論您出於何種原因,以下是在 Google Chrome、Mozilla Firefox、Microsoft Edge 和 Opera 中訪問移動瀏覽器模擬器的方法:

內容

  1. 如何在谷歌瀏覽器中打開和使用移動瀏覽器模擬器
  2. 如何在 Mozilla Firefox 中打開和使用移動瀏覽器模擬器
  3. 如何在 Microsoft Edge 中打開和使用移動瀏覽器模擬器
  4. 如何在 Opera 中打開和使用移動瀏覽器模擬器
  5. 您對可用的移動瀏覽器仿真選項感到滿意嗎?

如何在谷歌瀏覽器中打開和使用移動瀏覽器模擬器

在 Google Chrome 中,導航到您要在移動瀏覽器模擬器中查看的網站。然後,按鍵盤上的CTRL + SHIFT + I鍵,或者用鼠標單擊右上角的三個垂直點以打開“自定義和控制 Google Chrome”菜單。選擇更多工具,然後選擇開發者工具。

How to use the mobile browser emulator in Chrome, Firefox, Edge, and Opera

在 Google Chrome 中訪問開發者工具

單擊或點擊“切換設備工具欄”按鈕(它看起來像平板電腦旁邊的智能手機)或按鍵盤上的CTRL + Shift + M。這將激活加載移動頁面的設備工具欄。默認情況下,設備工具欄為您加載的站點使用響應式模板。單擊它並選擇要模擬的移動設備。您的選擇包括許多 iPhone、iPad、Surface Duo、兩個三星 Galaxy 設備和一個用於 PC 的 Moto G4 移動瀏覽器模擬器。

How to use the mobile browser emulator in Chrome, Firefox, Edge, and Opera

如何在谷歌瀏覽器中啟用移動瀏覽器模擬器

提示:不幸的是,您只能在啟用開發人員工具後使用CTRL + Shift + M鍵盤快捷鍵。

瀏覽您要測試的站點,在不同的智能手機和平板電腦之間切換,看看它的外觀。完成後,按Google Chrome 開發者工具右上角的X(關閉)按鈕返回標準桌面瀏覽模式。

How to use the mobile browser emulator in Chrome, Firefox, Edge, and Opera

關閉移動瀏覽器模擬器 Google Chrome

提示:如果您是 Google Chrome 的重度用戶,您可能還想了解如何使用 Google Chrome 的媒體控制選項。

如何在 Mozilla Firefox 中打開和使用移動瀏覽器模擬器

在 Mozilla Firefox 中,打開您要使用移動瀏覽器模擬器的站點。然後,按鍵盤上的CTRL + Shift + M或單擊右上角的漢堡按鈕以打開 Firefox 的菜單,然後選擇Web Developer。

How to use the mobile browser emulator in Chrome, Firefox, Edge, and Opera

訪問 Firefox 中的 Web 開發人員工具

您會看到一個菜單,其中包含對 Web 開發人員有用的工具。在列表中,選擇“響應式設計模式”,這種查看網頁的特定模式會在 Firefox 中加載。

How to use the mobile browser emulator in Chrome, Firefox, Edge, and Opera

在 Firefox 中選擇響應式設計模式

Firefox 啟用響應式設計模式。在窗口頂部,您可以看到此仿真模式使用的參數。如果未選擇任何設備,請單擊或點擊響應以打開包含可用於仿真的設備的下拉列表,然後選擇要模擬的設備。

您可以模擬許多 iPhone、iPad、Kindle Fire(Firefox 是唯一提供此模擬選項的瀏覽器)和三星 Galaxy S9 設備的移動瀏覽器。

How to use the mobile browser emulator in Chrome, Firefox, Edge, and Opera

在 Firefox 中使用移動瀏覽器模擬器

使用智能手機瀏覽器模擬器完成測試後,按Mozilla Firefox 右上角的X(關閉響應式設計模式)按鈕。

How to use the mobile browser emulator in Chrome, Firefox, Edge, and Opera

在 Firefox 中關閉移動瀏覽器模擬器

您將返回標準桌面瀏覽模式。

如何在 Microsoft Edge 中打開和使用移動瀏覽器模擬器

Microsoft Edge 使用與 Google Chrome 相同的渲染引擎,並提供相同的智能手機瀏覽器模擬器。要訪問它們,請訪問您要測試的網站,然後按鍵盤上的CTRL + SHIFT + I鍵或單擊Microsoft Edge 右上角的三個水平點( “設置和更多” )。在出現的菜單中,轉到更多工具,然後轉到開發人員工具。

How to use the mobile browser emulator in Chrome, Firefox, Edge, and Opera

訪問 Microsoft Edge 中的開發人員工具

單擊“切換設備仿真”按鈕(它看起來像平板電腦旁邊的智能手機)或按鍵盤上的CTRL + Shift + M。這將激活移動瀏覽器模擬器工具欄。默認情況下,它為您加載的站點使用響應式模板。單擊它並選擇要模擬的移動設備。您的選項包括與 Google Chrome 相同的智能手機和平板電腦。

How to use the mobile browser emulator in Chrome, Firefox, Edge, and Opera

在 Microsoft Edge 中訪問移動瀏覽器模擬器

瀏覽您要測試的站點,在不同的移動設備之間進行更改,然後查看它的外觀。完成後,按Microsoft Edge 右上角的X(關閉)按鈕。

How to use the mobile browser emulator in Chrome, Firefox, Edge, and Opera

關閉 Microsoft Edge 中的移動瀏覽器模擬器

您現在回到標準桌面瀏覽模式。

如何在 Opera 中打開和使用移動瀏覽器模擬器

在 Opera 中,像使用移動設備一樣訪問要查看的網頁。然後單擊左上角的 Opera 圖標(“自定義和控制 Opera”)。在打開的菜單中,選擇Developer ,然後選擇Developer tools。如果您更喜歡鍵盤,請按CTRL+Shift+I鍵以獲得相同的結果。

How to use the mobile browser emulator in Chrome, Firefox, Edge, and Opera

訪問 Opera 中的開發人員工具

開發者工具顯示在瀏覽器窗口的右側。單擊“切換設備工具欄”按鈕(它看起來像平板電腦旁邊的智能手機)或按鍵盤上的CTRL + Shift + M。設備工具欄顯示在左側。默認情況下,它為您加載的站點使用響應式模板。單擊它並從選項列表中選擇要模擬的移動設備。Opera 提供與 Google Chrome 和 Microsoft Edge 相同的移動瀏覽器模擬器,因為它基於相同的渲染引擎 (Chromium)。

How to use the mobile browser emulator in Chrome, Firefox, Edge, and Opera

在 Opera 中訪問移動瀏覽器模擬器

完成測試後,按右上角的 X(關閉)按鈕返回標準桌面瀏覽模式。

How to use the mobile browser emulator in Chrome, Firefox, Edge, and Opera

在 Opera 中關閉移動瀏覽器模擬器

您對可用的移動瀏覽器仿真選項感到滿意嗎?

現在您知道如何在您最喜歡的網絡瀏覽器中模擬各種移動設備。但是,您可能會注意到大多數 Web 瀏覽器都提供了與 iPhone 和 iPad 相同的仿真選項。如果您想模擬現代 Android 智能手機或平板電腦,您的機會非常渺茫,即使在 Google Chrome(由 Android 背後的公司開發的瀏覽器)中也是如此。如果您想要獲得最佳結果,您可能需要為此任務使用兩種瀏覽器:Chrome 和 Firefox,或者 Firefox 和 Edge 或 Opera。在您出發之前,請告訴我們您對可用選項的看法。

留下評論

使用 occ 指令安全地清除 ownCloud 檔案版本

使用 occ 指令安全地清除 ownCloud 檔案版本

刪除一個帳戶或所有使用者的所有已儲存的 ownCloud Server Classic 檔案版本,並區分完全清除和基於保留期限的過期。

ownCloud 行動連線被拒絕?請檢查 URL 和可及性

ownCloud 行動連線被拒絕?請檢查 URL 和可及性

以正確的順序檢查伺服器 URL、手機網路、HTTPS 端點和伺服器日誌,即可追蹤 ownCloud 行動連線被拒絕的原因。

使用 Systemd 定時器可靠地執行 ownCloud 後台作業

將按需作業運行替換為 systemd 定時器,該定時器每 15 分鐘執行一次 ownCloud 支援的 occ system:cron 命令。

透過尋找故障路由來恢復 ownCloud WebDAV 同步

透過 Apache、Nginx 或反向代理程式追蹤 WebDAV 請求,然後使用經過驗證的 PROPFIND 測試確認 ownCloud 同步功能正常。

設定 Nextcloud 的公共 URL,以便它可以存取自身。

透過設定其規範 URL 並從伺服器本身檢查 DNS、HTTPS 和反向代理路由,修復 Nextcloud 缺少出站位址警告的問題。

在 Ubuntu 24.04 上設定 Nextcloud Redis 快取

在 Ubuntu 24.04 上設定 Nextcloud Redis 快取

透過本機 Unix 套接字配置 APCu 和 Redis,以實現 Nextcloud 快取和檔案鎖定,並提供目前和舊版 Nextcloud 的步驟。

使用 Systemd 定時器自動執行 Nextcloud Cron

檢查 Nextcloud 的 cron 模式,修復其 systemd 服務和計時器,並驗證後台作業在啟動後以及每隔五分鐘運行一次。

使用 Redis 清除 Nextcloud 的檔案鎖定警告

啟用可靠的 Nextcloud 檔案鎖定,選擇適當的 Redis 或 Valkey 後端,並驗證警告是否清除,同時避免並發檔案變更的風險。

如何才能獲得 Nextcloud A+ 安全評級

如何才能獲得 Nextcloud A+ 安全評級

使用最新更新、HTTPS 和 HSTS、精確的反向代理信任以及針對公共伺服器的檢查,修復 Nextcloud 掃描中常見的錯誤。

啟用 Nextcloud 伺服器端加密,並評估其影響

為需要加密的儲存配置 Nextcloud SSE,保護加密金鑰,並在加密現有文件之前測量傳輸和 CPU 影響。