[ad_1]
正在為如何查看網站的移動版本而苦惱？
嗯，一個明顯的解決方案是拿出你的手機並在那裡打開網站。 但是，如果您正在閱讀這篇文章，那麼出於某種原因，這可能不是您的選擇。
值得慶幸的是，還有很多其他方法可以直接從桌面 Web 瀏覽器查看網站的移動版本。 因此，即使您無法使用手機，也可以輕鬆查看移動版本的網站。
在這篇文章中，我們將分享四種簡單的方法來預覽網站的移動版本：
- 前兩種方法適用於任何類型的網站，無論是您的網站還是其他人的網站，也無論它是否使用 WordPress, Shopify, 維克斯, 方空間，或其他任何東西。
- 最後兩種方法是特定於 WordPress 的選項，可向您展示如何查看 WordPress 網站的移動版本。 這些僅在您擁有該網站時才有效。
如何從瀏覽器查看網站的移動版本
無論您是否擁有該網站，都有兩種簡單的方法可以在互聯網上查看任何網站的移動版本：
- 使用 Web 瀏覽器的開發人員工具. Chrome 對此非常有用，但大多數其他網路瀏覽器都提供類似的工具。
- 使用專用的移動模擬器工具. 您所做的就是輸入您想要查看的 URL，您就可以像移動用戶一樣瀏覽它。
讓我們來看看這兩種方法。 然後，稍後我們也會向您展示如何查看移動版本 您自己構建的網站（在 WordPress 上）.
想看看#website 在#mobile 上的樣子嗎？ 方法如下（點擊 3 次）📱📱📱
使用 Web 瀏覽器的開發人員工具
大多數瀏覽器（例如 Google Chrome、Safari、Firefox、Microsoft 和 Brave）都提供了開發人員工具，可讓您深入了解網站，包括查看它在不同設備上的外觀。
藉助開發人員工具，您可以快速查看網站在不同智能手機、平板電腦等設備上的外觀。
對於這些示例，我們將假設您使用的是 Chrome（或任何基於 Chromium 的瀏覽器，例如 Brave）。 但是，大多數其他 Web 瀏覽器都提供類似的功能，但界面會有所不同。
首先，右鍵單擊您網站的前端，然後從菜單中選擇「檢查」：
這將啟動開發人員工具並在右側顯示一個模塊，其中包含來自該頁面的編碼元素。
您不必擔心編碼，因為主要目標是切換到查看網站的移動版本。 找到小的 Toggle Device Toolbar 按鈕（看起來像手機和平板電腦圖標）並單擊它以激活移動視圖。
這會自動顯示響應式移動視圖，您可以在其中根據要模擬的設備更改設備尺寸：
為了使這種方法更具吸引力，它是少數具有內置設備默認值的選項之一，可以更準確地了解您的網站在實際設備上的顯示方式。
例如，您可以選擇 iPad Pro，它會立即將顯示器的尺寸調整為 iPad Pro 的尺寸。
或者您可以選擇較小的 Pixel 2 XL。
或者更小的 Galaxy Fold。 測試列表中的每個設備，並確保您的網站在每個設備上看起來都可以接受。
使用在線測試儀或模擬器
模擬器通常用於在其原生環境中測試應用程序，但其中許多可用於網站響應。 您還可以在線找到基本的測試人員以粘貼您的 URL，並查看它在較小設備上的外觀。
響應式PX.com 是一個可行的選擇，但您可以通過快速在線搜索找到很多其他選擇。
我們建議人們試用模擬器和模擬器的原因是因為它們可以讓您更好地控制站點尺寸。 而且它們通常比使用瀏覽器的開發人員工具更簡單。
以 ResponsivePX.com 為例：您訪問該站點，粘貼 URL，並立即看到移動版本。
它允許您調整寬度、高度和滾動條可見性。 您甚至可以與組織中的人員共享結果。
如何查看您的 WordPress 網站的移動版本
如果你是 在您自己的 WordPress 網站上工作，WordPress 還提供了一些內置選項來幫助您查看您的網站在移動設備上的外觀。
當您在 WordPress 編輯器中工作時，您可以快速查看您的內容在不同設備上的外觀。 您也可以在 WordPress 定製器中自定義主題時執行相同操作。
讓我們通過這些方法……
通過頁面或帖子編輯器預覽查看移動版本
您可以逐頁查看網站的移動版本。 例如，您可能想查看您的 當前的博客文章 在其移動視圖中看起來很像樣。 檢查您的主頁的移動響應能力也是明智之舉，尤其是在更改設計之後。
讓我們從主頁開始。 以下是從桌面視圖看以下網站的樣子：
通過轉到 WordPress 儀錶板中的帖子或頁面選項卡，您可以查看單個頁面並發布移動視圖。
對於以前創建的帖子和頁面，請轉到所有帖子或所有頁面。
我們將從一頁開始； 更具體地說，主頁。 選擇您想要的任何頁面。
WordPress 後端中的每個頁面和帖子都在右上角提供了一個預覽鏈接。 選擇該預覽按鈕以顯示包含以下選項的下拉菜單：
- 桌面
- 藥片
- 移動的
默認情況下，WordPress 顯示桌面版本。
選擇平板電腦或移動設備視圖以查看您的網站將其元素（如圖像、視頻、菜單和文本框）轉換為更小、更易讀和可點擊的格式。
在其他視圖中測試您的網站時，請檢查鏈接是否可點擊（不是太小），資產仍然可見，並且一切都清晰可見，而不會強迫用戶放大。
花一些時間在頁面上向下滾動以檢查所有內容。 例如，該站點在主頁上列出了多個電子商務產品，包括圖像、產品名稱和添加到購物車按鈕。
它們看起來不錯，但我們可能希望切換到兩個或三個產品列，以使產品詳細信息更大。
使用這種方法時，帖子沒有什麼不同。 它們只是位於 WordPress 的一個單獨部分下（帖子→所有帖子）。
看看這些是如何包含你的博客文章而不是靜態網頁，測試更重要 移動友好. 為什麼？ 因為許多公司每個月都會發布數十篇博客文章，而對頁面只有很小的更新。 如果博客是您的主要內容來源，您需要確保在發布之前每個博客都已準備好移動設備。
像往常一樣，轉到「預覽」，然後單擊「平板電腦」或「手機」。
桌面視圖有時看起來與平板電腦視圖非常相似，因此請確保您沒有放大瀏覽器。
平板電腦視圖看起來比桌面視圖小一些，但網站內容周圍有黑色空間，模仿更逼真的平板電腦尺寸。
在 WordPress 定製器中查看網站的移動版本
WordPress 定製器 不僅為您提供了編輯 WordPress 主題的絕佳方式，而且在您進行編輯時可以對您的網站進行可視化預覽。
幸運的是，WordPress 定製器不僅將您限制為桌面預覽。 事實上，可以在查看手機或平板電腦視圖的同時完成所有編輯。
要實現這一點，請轉到外觀 → 自定義以啟動自定義程序。
默認情況下，定製器如下所示。 它位於標準桌面視圖中，左側可調整設置，右側是站點預覽。
查看設置列表的最底部以找到三個按鈕圖標：一個用於桌面視圖，另一個用於平板電腦視圖，第三個用於移動視圖。
單擊平板電腦視圖按鈕以查看您當前的編輯如何顯示在一般平板電腦大小的界面上。
移動視圖按鈕使該界面更小，使您更接近移動智能手機的標準窗口大小。
注意：請記住，這些後端移動預覽是估計值。 世界上有這麼多類型的設備，沒有人會看到完全相同的東西。
不要忘記菜單。 眾所周知，移動設備上的菜單很麻煩。 檢查主題開發人員是否進行了大量測試。 您會注意到移動菜單通常被放置在一個隱藏的漢堡菜單中（三個水平線），並且您最終可能會得到兩個菜單（例如該主題如何在屏幕底部提供電子商務按鈕）。
與往常一樣，不要快速瀏覽第一頁並假設您的整個網站都已準備就緒。 這是錯過會損害整體用戶體驗的小缺陷的秘訣。
在平板電腦視圖中瀏覽整個網站，包括從產品頁面到博客文章，從購物車到關於我們頁面的所有內容。
並在移動視圖中完成相同的過程。 我們特別推薦測試電子商務功能，因為您最不想要的是一個小的結賬模塊或添加到購物車按鈕。
查看網站的移動版本很容易
在本文中，我們介紹了有關如何查看網站移動版本的四種方法，無論該網站的所有者是誰或使用何種技術構建。
想看看#website 在#mobile 上的樣子嗎？ 方法如下（點擊 3 次）📱📱📱
最靈活的選擇是使用瀏覽器的開發人員工具。 無論如何這都會起作用。 只要能打開桌面版網站，就可以使用開發者工具預覽手機版。
模擬器方法也適用於大多數網站，但網站需要有一個可公開訪問的 URL 以便模擬器能夠獲取網站。
另一方面，如果您是 WordPress 用戶，您可以依靠 WordPress 的內置響應式預覽工具在您的網站上工作時完成工作。 或者，其他方法也適用於 WordPress 網站。
如果您需要在自己的網站上工作的移動視圖，您可能還想查看 我們創建適合移動設備的網站的指南 有關在預覽網站的移動版本時需要注意的事項的一些提示。
您對如何查看移動版網站還有疑問嗎？ 讓我們在評論中知道！