你想預覽你的WordPress網站的手機版嗎？
預覽移動佈局有助於瞭解你的網站在行動裝置上的樣子。 當你的網站正在開發時，甚至當它已經上線時，在台式電腦上查看手機版往往更容易，而且有問題時，你可以快速對網站進行修改。
在這篇文章中，我們將告訴你如何從桌面上查看WordPress網站的移動版本。
為什麼你應該預覽你網站的移動佈局？
超過50%的網站訪問者將使用他們的手機訪問你的網站。 大約3%的人將使用平板電腦。
這意味著，擁有一個在手機上看起來很好的網站是非常重要的。
事實上，移動端是如此重要，以至於谷歌現在在其網站排名演算法中使用移動優先索引。 這意味著，谷歌將使用你的網站的移動版本進行索引。
即使你使用的是一個回應式的WordPress主題，你仍然需要檢查你的網站在移動端看起來如何。 你可能想創建不同版本的關鍵登陸頁面，為行動使用者的需求進行優化。
重要的是要記住，大多數移動預覽不會是完全完美的，因為有許多不同的移動螢幕尺寸和瀏覽器。 你的最終測試應該始終是在實際的行動裝置上看你的網站。
我們將介紹兩種不同的方法使用桌面瀏覽器來測試你的網站在移動端上的樣子。
方法1：使用WordPress的主題定製器
你可以使用WordPress的主題定製器來預覽你的WordPress網站的移動版本。
只需登錄到你的WordPress儀錶板，進入外觀>自定義介面。
這將打開WordPress主題定製器。 在本教程中，我們將使用Astra主題。
根據你所使用的主題，你可能會在左側功能表中看到略有不同的選項。
在螢幕的底部，只需點擊移動圖示。
然後你會看到你的網站在行動裝置上的預覽。
當你還沒有完成創建你的博客或處於維護模式時，這種預覽移動版本的方法特別有用。
你現在可以對你的網站進行修改，並在發佈前檢查它們看起來如何。
方法2：使用谷歌瀏覽器的DevTools設備模式
谷歌瀏覽器有一套開發者工具，可以讓你對任何網站進行各種檢查，包括看到它在行動裝置上的預覽效果。
只需在桌面上打開谷歌瀏覽器，訪問你想檢查的頁面。
接下來，你需要右鍵按兩下該頁面，並選擇 「檢查 」選項。
一個新的面板將在螢幕的右側或底部打開。
它看起來會像這樣：
在開發者檢視中，你將能夠看到你網站的HTML原始程式碼、CSS和其他細節。
接下來，你需要點擊 「切換設備工具條 」按鈕，以改變為行動檢視。
你會看到你的網站的預覽縮小到移動螢幕的大小。
在移動檢視中，你的網站的一般外觀也將改變。 例如，功能表會摺疊，額外的圖示會移到功能表的左邊而不是右邊。
當你把滑鼠指標懸停在你的網站的移動檢視上時，它將變成一個圓圈。 這個圓圈可以用你的滑鼠移動，以模仿行動裝置上的觸摸屏。
你也可以按住 「Shift」鍵，然後點擊並移動你的滑鼠來類比捏住移動螢幕來放大或縮小。
在你的網站的移動視圖上方，你會看到一些額外的選項。
這些設置可以讓你做一些額外的事情。 你可以檢查你的網站在不同類型的智慧手機上會是什麼樣子。
例如，你可以選擇像iPhone這樣的行動裝置，看看你的網站在該設備上將如何顯示。
你還可以類比你的網站在快速或緩慢的3G連接上的表現。 你甚至可以使用旋轉圖示來旋轉移動螢幕。
