火狐瀏覽器：

Question

由於我們現在處於行動優先的世界，因此能夠在行動電話或模擬行動電話上輕鬆測試網站變得越來越重要。我與從事網站和社交媒體產品工作的人員合作，我想鼓勵他們定期從桌面瀏覽器以行動視圖開啟網站。我特別想到瀏覽器的內建「行動視圖」功能，通常隱藏在瀏覽器提供的所有其他開發人員工具中，但我很高興考慮任何可以快速設定的功能。

如何從桌面瀏覽器開啟網站的行動視圖？

Answer 1

火狐瀏覽器：

• 在 Windows/Linux 中，按Ctrl+ Shift+M
• 在 macOS 中，按option+ command+M

您也可以在（「工具」）、「Web 開發人員」、「響應式設計模式」下找到該選單項目。

Chrome 和 Edge：

您需要先開啟「開發者工具」：

• 在 Windows/Linux 中，按Ctrl+ Shift+I或僅F12
• 在 macOS 中，按option+ command+I

一旦開發人員工具打開並聚焦，您就可以切換設備模擬：

• 在 Windows/Linux 中，按Ctrl+ Shift+M
• 在 macOS 中，按command+ shift+M

如果您喜歡點擊按鈕而不是按鍵盤快捷鍵，則開發人員工具工具列中有一個小按鈕可以啟用裝置模擬。

蘋果瀏覽器：

看起來蘋果預設禁用了進入響應式設計模式的鍵盤快速鍵。您可以關注本教學介紹了為其配置鍵盤快捷鍵。

您可以點選「開發」、「進入響應式設計模式」來找到該選單項目。如果看不到「開發」功能表項，則需要透過開啟「首選項」、「進階」並勾選「在功能表列中顯示開發功能表」來啟用它。

Answer 2

弗利姆的回答100%正確。為了防止記住快捷方式太麻煩，開發人員工具中的這個藍色按鈕可以在 Web 視圖和行動裝置/平板電腦視圖之間切換：

或使用火狐：

啟用裝置工具列後，您可以從下拉式選單中選擇要模擬的裝置的品牌和型號。

Answer 3

為了測試的目的，我使用以下網站：-

1. http://www.jamus.co.uk/demos/rwd-demonstrations/
2. http://mattkersley.com/responsive/

上述兩個網站都允許我以多種裝置寬度查看我的 Web 應用程式。

Answer 4

在瀏覽器中新增「用戶代理切換器」擴充功能並指定行動用戶代理程式。如果網站是聰明的足夠了，它將為您提供行動優化版本。

我不會推薦任何特定的擴充功能。理想的瀏覽器應該內建行動瀏覽器的預設，並且能夠在每個網站的基礎上啟用或停用使用者代理切換。