如何在 PC 上查看網站的移動版本

如果您是 Web 開發人員或擁有在線業務，您可能很想知道移動網站在桌面上的外觀。您的移動網站的外觀和功能可能至關重要，因為一半以上的互聯網流量來自手機。客戶更有可能在網站上停留更長時間或購買具有視覺吸引力的商品。桌面視圖還可以幫助您更快地進行編輯和修復可能的問題。

幸運的是，這是一個相對簡單的過程。在本文中，我們將向您展示如何在不同的設備和瀏覽器上查看網站的移動版本。

如何在 Mac 上的 Chrome 中查看網站的移動版本

在 Chrome 中，您可以使用名為 DevTools 的內置開發人員工具測試前端並查看網站的所有組件是否正常運行。因為它提供了預定義的設備選擇，所以 DevTools 是開發人員快速將視圖從桌面轉移到移動設備的最佳方式，反之亦然，而無需任何開發人員擴展。

您還可以更改屏幕尺寸以滿足您的需要，並調整屏幕寬度和高度以查看您的網站在不同屏幕尺寸下的外觀。要在 Mac 上執行此操作，請按照下列步驟操作：

1. 啟動 Google Chrome 瀏覽器並轉到您要查看的站點。
   
2. 按鍵盤上的 F12 鍵訪問 DevTools。
   
3. 當模式打開時，單擊“切換設備仿真”圖標。
   
4. 您可以從 iOS 和 Android 設備列表中進行選擇以模擬它們。
   
5. 它將以您選擇的移動形式顯示網站。
   

完成後，只需關閉開發人員工具窗口即可關閉網站的移動版本。

如何在 Windows PC 上的 Chrome 中查看網站的移動版本

如果你想在 Chrome 中的 Windows PC 上查看網站的移動版本，它的過程非常相似：

1. 打開 Chrome 瀏覽器。
   
2. 在 Chrome 中，轉到您希望在移動版本中查看的網站。
3. 右鍵單擊該網頁，然後從菜單中選擇“檢查”。
   
4. 要轉到開發人員工具，請單擊“更多工具”選項卡並選擇“開發人員工具”或按 F12 打開 DevTools。
   
5. 開發人員工具窗口將打開。
6. 單擊設備切換圖標以切換到移動站點查看模式。
   
7. 選擇您要模擬的移動設備（可選）。
   
8. 您現在可以修改屏幕的尺寸以滿足您的需要。

如何在 Chromebook 上的 Chrome 中查看網站的移動版本

使用 Chromebook 在 Chrome 中訪問移動版網站與前兩種方法非常相似。

1. 打開谷歌瀏覽器網絡瀏覽器。
   
2. 在移動設備上打開您要訪問的網頁。
   
3. 要訪問菜單，請單擊垂直的三點圖標。
   
4. 將鼠標拖到列表中的更多工具項上。
   
5. 選擇“開發者工具”。
   
6. 瀏覽器中的開發者工具窗口將打開。
   
7. 通過單擊設備切換圖標來切換移動站點查看模式。
   

這將調出移動站點的用戶界面。您還可以通過從下拉框中選擇品牌和型號來選擇首選設備體驗。每當您關閉開發人員工具控制台時，該網頁將刷新為桌面站點。

如何在 Mac 上的 Firefox 中查看網站的移動版本

您可以使用 Firefox 等其他 Web 瀏覽器在 Mac 桌面上查看移動網站。調整瀏覽器窗口大小是大多數 Web 開發人員用來評估響應式設計網站的方法之一。然而，大多數時候，這種替代方案似乎是不可接受的。

這就是 Firefox 瀏覽器的 Web 開發功能派上用場的地方。如果您知道如何在 Firefox 中訪問移動版網站，則可以以多種分辨率瀏覽網頁。按著這些次序：

1. 打開您希望查看的網站的移動版本。
2. 右鍵單擊網頁，然後從菜單中選擇“檢查”選項。
   
3. 選擇“響應式設計模式”。
   
4. 選擇網站的屏幕尺寸。
   

如何在 Windows PC 上的 Firefox 中查看網站的移動版本

Windows PC 還可以選擇使用 Firefox 查看網站的移動版本。操作方法如下：

1. 在您的 PC 上啟動 Firefox。
   
2. 轉到您要查看為移動版本的網站。
   
3. 單擊水平三欄圖標轉到“設置”。
   
4. 您會看到一個下拉菜單，您必須在其中選擇“Web Developer”選項。
   
5. 選擇“響應式設計模式”。
   
6. 最後，您可以選擇智能手機型號以查看您的網站在該設備上的顯示效果。
   

如何在 Mac 上的 Safari 中查看網站的移動版本

我們已經介紹瞭如何使用 Chrome 和 Firefox 在桌面上查看移動網站。但是 Mac 設備自帶的默認瀏覽器 Safari 呢？幸運的是，也可以在 Safari 中查看網站的移動版本。

1. 啟動 Safari 瀏覽器。
   
2. 轉到您要查看為移動版本的網站。
   
3. 單擊“選項”，然後單擊“開發”菜單。
   
4. 從下拉菜單中選擇“進入響應式設計模式”。
   
5. 您現在可以查看該網站的移動版本。
   

其他常見問題解答

手機可以查看桌面版網站嗎？

答案是肯定的！您可以從移動版切換到桌面版，無需使用計算機即可查看。在Chrome中將移動版轉移到桌面版的步驟如下：

1. 轉到您要在桌面視圖中查看的網站。

2. 點擊三點圖標訪問菜單。

3.現在選擇“桌面視圖”選項。

請記住，這些步驟可能因您使用的手機而異。

使移動網頁設計更容易

開發人員工具非常適合在桌面上分析和修改網站的移動版本，而無需切換設備。您可以更改屏幕大小以觀察組件在各種設備上的功能。您可以使用響應模式調整不同的組件並為多種屏幕尺寸創建網站。

在設計網站時，設計師應該始終牢記網站前端在手機、平板電腦和台式機上的顯示方式。使用本文中描述的方法還可以幫助開發人員這樣做，並確定網站的哪些組件正在產生問題以解決這些問題。

您是否嘗試過在桌面上查看網站的移動版本？您更喜歡使用哪種瀏覽器來執行此操作？請在下面的評論部分告訴我們。