無論您是為客戶設計網站還是管理自己的WordPress網站，在公開任何更改之前瞭解它在移動裝置上的外觀和工作方式都很重要。
您可能有一部手機可以用來檢視您的網站。但是，如果您在膝上型電腦或桌上型電腦上工作，則不得不繼續使用手機會很不方便。
即使您的網站在您的手機上看起來不錯，也有很多手機和平板電腦。僅僅因為它看起來不錯，並不一定意味著它可以在各種不同的螢幕尺寸、瀏覽器和作業系統上完美執行。
那麼，您究竟如何在移動裝置上預覽WordPress網站呢？在本指南中，我們將介紹一些無需離開計算機即可在移動裝置上測試您的網站的簡單方法。
為什麼測試網站的移動版本如此重要？
幾年前，移動裝置取代臺式電腦成為瀏覽網頁的主要方式。2021年第一季度，移動裝置佔全球網路流量的54.8%，去年手機和平板電腦佔據了全球57.37%的市場份額。
在全球一些地區，移動裝置的使用比桌面裝置的使用要大得多。例如，在印度，移動裝置擁有超過77%的市場份額。
為了應對不斷增長的移動網際網路使用，谷歌已經開始懲罰那些不能在移動裝置上提供良好使用者體驗的網站。
在過去的幾年中，已經有許多演算法更新，旨在為移動使用者提供更好的搜尋體驗。2015年的“ Mobilegeddon ”更新最為激烈，因為谷歌轉向了移動優先模式。
作為WordPress使用者，選擇移動響應主題是確保您的網站看起來不錯並且在移動裝置上執行良好的第一步。
但是使用塊編輯器，使用者可以比以前更好地控制單個頁面的格式。因此，即使您不是在開發主題或外掛，每次新增新內容時，檢查您的網站在移動裝置上的外觀也很重要。
如果您使用Divi或Elementor等視覺化拖放頁面構建器來建立新頁面佈局或向您的網站新增內容，這一點尤其重要。
方法一：使用內建的WordPress移動預覽
您始終可以在釋出之前預覽您的WordPress文章和頁面。但是您是否注意到您還可以預覽您的網站在移動裝置上的外觀？
在WordPress中有兩個地方可以訪問移動預覽：
- 來自文章和頁面編輯器（並不總是準確的）
- 來自WordPress定製器
WordPress文章/頁面編輯器預覽
我們先來看看文章和頁面編輯器中的移動預覽是如何工作的。單擊“釋出”或“更新”按鈕旁邊的“預覽”按鈕。
在彈出的下拉選單中，選擇“平板電腦”或“手機”，然後點選。
這將立即調整頁面編輯器的大小。但是，這是對內容外觀的非常粗略和現成的估計，可能不太準確，尤其是在您使用自定義塊或外部載入的CSS時。
您可以在此示例中看到，編輯器只是調整了區塊的大小以適應較小的螢幕幷包裝了文字。
但是，如果您以較小的螢幕尺寸檢視實時站點，您會發現它看起來根本不像這樣。相反，響應式設計設定已開始重新排列塊並調整文字大小。
以下是它在較小的瀏覽器螢幕上的實際外觀：
教訓：不要相信文章和頁面編輯器中的移動預覽。公平地說，這是一個相當新的功能，並且僅在2020年年中釋出的WordPress 5.5之後才出現。希望未來移動頁面預覽會有所改進。
WordPress定製器預覽
那麼WordPress定製器中的預覽是否更好？讓我們來看看。
要訪問WordPress移動預覽版，請轉到WordPress儀表盤中的外觀 > 自定義。
這將顯示您網站外觀的預覽，並允許您實時檢視您對樣式所做的更改如何更改其外觀。您可以導航到站點上的任何頁面並上下滾動，就像它是站點的實時版本一樣。
要檢視您的網站在不同螢幕尺寸上的顯示效果，請使用自定義選單底部的圖示在裝置檢視之間切換。
預設是桌面，中間是平板，右邊是智慧手機。
這是檢視您網站的移動版本的最簡單、最快捷的方式，因為它位於WordPress儀表盤中，只需單擊幾下即可訪問
但是，這基本上只是為您提供與調整瀏覽器視窗大小相同的檢視。它並不能準確複製您的網站在每臺移動裝置上的顯示和行為方式。
它還只允許您以三種不同的螢幕寬度檢視您的網站。移動裝置具有許多不同的螢幕尺寸和解析度。
正如WordPress核心開發團隊對該功能的原始提案所述，“預設情況下只有三個選項可用，而且它們是故意模稜兩可的。其目的不是看起來像特定的裝置，而是要了解網站在大致平板大小、縱向裝置或大致手機大小的裝置上可能是什麼樣子。”
此外，WordPress定製器僅適用於支援它的主題。這意味著如果您使用的主題不適用於定製器，您將無法使用此方法在移動裝置上預覽您的網站。
在WordPress頁面構建器中檢視移動預覽
如果您使用的是Divi、Elementor、Visual Composer等視覺頁面構建器，它們中的大多數都帶有自己的工具，用於預覽您網站的移動版本並檢視響應式設計在不同螢幕尺寸下的外觀。
請參閱您正在使用的構建器的使用者指南，以準確瞭解如何在移動裝置上編輯和預覽您的WordPress網站。
方法二：在Chrome中使用開發者檢視
一些瀏覽器具有內建的裝置模擬器。Chrome是最受歡迎的瀏覽器之一，您可以使用它來預覽您的網站在多種不同裝置和不同解析度下的外觀。
Chrome裝置檢視比WordPress移動預覽要先進得多。除了能夠在流行裝置之間切換外，您還可以檢視縮放或旋轉螢幕時網站的外觀，甚至可以模擬受限制的移動網際網路連線。
但是，雖然這為您提供了比使用內建WordPress移動預覽更多的預覽選項，但它仍然只是您網站外觀的近似值。
重要的是，您只能瞭解您的網站在Chrome中的外觀。許多移動裝置使用不同的瀏覽器，僅在Chrome中進行測試可能還不夠。
但這是測試您的網站在不同大小下的外觀和工作方式的一種非常快速和簡單的方法，它可以提醒您任何重大問題。
要在“裝置模式”下使用Chrome，請轉到選單中的檢視 > 開發人員 > 開發人員工具。
這會將您的瀏覽器螢幕分成兩部分，一側是您的網站，另一側是程式碼和元素檢查器。
點選開發者工具頂部看起來像手機和平板電腦的小圖示。這將調整瀏覽器檢視的螢幕大小，以便您可以看到您的網站在較低解析度下的外觀。
它還將在瀏覽器檢視的頂部新增一個額外的工具欄。您可以使用它來更改它正在模擬的裝置、手動設定螢幕解析度、調整縮放、更改裝置的旋轉以及設定節流級別以檢視頁面載入時間受到的影響。
方法三：使用第三方裝置模擬器或測試服務
對WordPress開發人員來說，徹底測試他們開發的網站、主題和外掛非常重要。對於這種測試，使用裝置模擬器或模擬器是必不可少的。
模擬器複製裝置的硬體和軟體，而模擬器僅模擬作業系統和使用者介面。
設定和執行模擬器可能很複雜，而且它們往往執行緩慢。幸運的是，它們主要用於測試應用程式和遊戲，而不是網站測試所必需的。
以前，您必須在計算機上安裝模擬器軟體才能執行測試。現在更容易了，因為有幾種服務可以在雲中線上執行。
這意味著您可以在幾乎任何您想要的裝置上執行任何瀏覽器來測試您的WordPress網站。
您可以嘗試的一些服務包括：
- MobileMoxie – 使您能夠在50多部手機上測試您的網站和移動搜尋結果。您可以在有限的基礎上免費使用該服務，或者以每月29美元的價格註冊以進行無限制的實時測試。
- LambdaTest – 一個基於雲的測試平臺，可在多個裝置上的數千個瀏覽器和作業系統上進行站點預覽，並帶有用於實時除錯的工具。免費計劃包括每月60分鐘的測試，付費計劃每月15美元起。
- BrowserStack – 這實際上不是一個模擬器，而是一項服務，可讓您在雲基礎設施上的2,000多個瀏覽器和真實裝置上測試您的網站。該服務每月收費39美元，但有免費試用。
稽覈和測試您的網站以確保它針對移動裝置進行了優化
以上任何一種方法都可以讓您檢視您的網站在移動裝置上的外觀。但是，您可能需要再執行一些測試，看看您是否可以為移動使用者做出任何其他改進。
谷歌移動友好測試
這個簡單的線上工具將允許您輸入任何URL，並讓您知道它是否認為它“適合移動裝置”。
要使用該工具，只需轉到https://search.google.com/test/mobile-friendly並輸入您要測試的站點上的頁面的URL。
運氣好的話，您會得到如下所示的響應：
如您所見，這還可以讓您方便地預覽您的網站在移動裝置上的外觀。雖然這只是一個截圖，但如果有任何重大問題，它可以提醒您。
如果有任何載入問題或問題，您可以檢視有關如何改進頁面的完整詳細資訊和建議。
注意：綠色的“頁面適合移動裝置”並不意味著您已獲得 Google 的批准印章，並且您的網站完全針對移動裝置進行了優化。它只是讓您放心，沒有任何重大問題意味著它對於移動使用者來說難以辨認或無法使用。
谷歌PageSpeed Insights
PageSpeed Insights是Google的另一個免費工具，它會根據您的網站在速度方面的優化程度為您的網站打分（如何做到PageSpeed Insights測試滿分）。
您可以在移動裝置和桌面裝置之間切換（您將獲得每個分數），該工具將為您提供一個列表，列出您可以採取哪些措施來加快您的網站速度，以及每個專案節省的估計時間。
MobiReady
MobiReady是一款免費工具，可在您的網站上執行移動就緒測試，併為您提供有關其執行情況的報告。
您可以將您的網站與競爭對手進行基準比較，並獲得分析和建議您可以採取哪些步驟來改進您的網站以供移動使用者使用。
如何使您的WordPress網站移動友好
如果您使用的是WordPress，那麼您應該先擁有一個適合移動裝置的網站。WordPress擁有內建工具，可確保您的網站多年來在移動裝置上執行良好。
即便如此，您仍應採取一些步驟來確保您的WordPress網站為移動裝置上的使用者提供出色的體驗。
1. 使用響應式WordPress主題
如果您使用的是定期更新的現代主題，那麼您在這裡可能沒問題。
但是，如果您使用的是幾年前的主題，您應該檢查它是否為移動響應而構建。
如果您的網站沒有重新格式化自身以在較小的尺寸下更易於閱讀，請檢查您使用的是最新版本的 WordPress 核心和您的主題。
如果更新沒有幫助，您應該考慮切換到更現代、更適合移動裝置的WordPress主題。
2. 確保你的外掛也是響應式的
大多數外掛不會影響您的網站在移動裝置上的顯示方式。但是，如果他們向您的網站新增任何視覺元素，您需要檢查它們是否在小螢幕尺寸上正常工作。
同樣，現代外掛應該被設計為在移動裝置上和在高解析度下一樣好。但這絕對是您在啟動網站之前應該檢查的內容。
對於外掛來說，功能尤為重要。例如，如果他們向您的網站新增表單或小工具，請確保它易於在移動裝置上導航和使用。
3.禁用移動裝置上的彈出視窗
彈出視窗對於桌上型電腦或膝上型電腦上的使用者來說可能是一種痛苦，但它們會使您的網站對移動使用者完全無法使用。
來源：https://developers.google.com/search/blog/2016/08/helping-users-easily-access-content-on
最好為移動使用者完全禁用它們，而不是觸發填充整個螢幕的彈出視窗。
谷歌實際上已經開始懲罰那些有侵入性彈出視窗掩蓋底層內容的網站。所以最好完全避免它們。或者切換到只佔用少量螢幕空間的橫幅。
4.確保影象和視訊正確縮放並且可以調整大小
媒體和媒體畫廊在小螢幕上顯示可能特別棘手。確保媒體元素在縮放時可見，或者如果它們不是必需的並且在移動裝置上看起來不太好，請考慮禁用它們。
對於視訊和影象畫廊，請確保您使用的畫廊外掛考慮了移動體驗。例如，使用者應該能夠瀏覽圖片庫。
如果影象或視訊按比例縮小，則讓使用者可以輕鬆地以更大的尺寸檢視它們。大多數移動使用者都希望以全屏尺寸觀看視訊。
5.優化網站速度和效能
確保您的網站快速載入始終很重要。但是頁面載入時間對於為移動使用者提供良好的使用者體驗尤為重要。
移動使用者經常在旅途中並希望快速訪問資訊。幾年前的一項谷歌研究發現，如果頁面在3秒內沒有載入， 53%的移動使用者會放棄該頁面。隨著網際網路速度和技術的不斷進步，使用者每年都變得越來越不耐煩。
然而，平均網頁在移動裝置上的載入時間要長87.84%。
您可以做很多事情來加速您的WordPress網站和移動裝置。您將從以下方面獲得最大收益：
小結
您可以使用這些方法中的任何一種來測試您的WordPress網站在移動裝置上的外觀，但它們都不能準確地複製真實體驗。
在啟動新網站或進行任何重大更改之前，請確保至少在一部真正的智慧手機上檢查您的網站。
如果您已經利用了上面的一些預覽方法，它應該看起來沒問題。因此，只需確保您可以在網站上導航（確保檢查按鈕和可觸控區域），所有選單都正確顯示，並且任何表單或互動式小工具都可以正常工作。
然後，您可以滿懷信心地啟動您的網站，確保為桌面和移動使用者提供出色的使用者體驗。
評論留言