手機端移動流量是一股不可忽視的力量，這已不是什么秘密。在過去的幾年里，移動互聯(lián)網(wǎng)用戶的數(shù)量已經(jīng)超過了在臺式機上上網(wǎng)的人數(shù)。到目前為止，超過一半的互聯(lián)網(wǎng)消費是通過手機、平板電腦和其他移動設備進行的。這也使得必須使用移動測試工具進行 Web 開發(fā)。
網(wǎng)站的移動能力已經(jīng)成為谷歌的一個排名因素。因此，作為 WordPress 開發(fā)人員或 WordPress 網(wǎng)站的所有者，您將無法針對移動設備優(yōu)化您的網(wǎng)站。這通常涉及大量測試。
由于市場上的手機和平板電腦數(shù)量眾多，很難確保您的網(wǎng)站在所有手機和平板電腦上看起來都很出色，甚至在大多數(shù)手機和平板電腦上都非常出色。好像堅持瀏覽器兼容性還不夠難。
幸運的是，許多移動測試工具已經(jīng)將讓我們的生活變得更輕松作為他們的使命。因此，在您將辛苦賺來的現(xiàn)金投資于整個 Apple 和 Android 產(chǎn)品線之前，讓我們看看這些產(chǎn)品能為您帶來什么。我們今天在這里涵蓋了 12 個選項，希望它們可以涵蓋目前市場上的大多數(shù)設備類型。
用于移動測試的瀏覽器開發(fā)工具
如果您認為在針對移動設備進行優(yōu)化時桌面瀏覽器是錯誤的起點，請再想一想。所有主要瀏覽器都有自己的開發(fā)工具系列，其中還包括用于移動測試的工具。
您不僅可以使用它們來檢查站點的 HTML 和 CSS，還可以實時了解它在不同移動設備上的外觀。我們將在這里介紹 Chrome、Firefox 和 Safari。
1. Chrome 設備模式
要進入設備模式，您首先需要激活開發(fā)者工具。您可以通過View > Developer > Developer Tools到達那里。或者只需按Ctrl+Shift+I 或 F12。
其中任何一個都將打開屏幕右側(cè)的開發(fā)者控制臺。如果您將眼睛對準控制臺的左上角，您會發(fā)現(xiàn)一個看起來像智能手機和平板電腦堆疊在一起的小圖標。單擊后會激活設備模式。
如何使用設備模式
在這種模式下，您當前所在的網(wǎng)站顯示在一個較小的框架中，這反映了移動設備的范圍（如果需要，您可以將開發(fā)人員工具拉到一邊以獲得更多空間）。
縮小和擴大框架，使屏幕適合您的個人需求。或者，使用左上角的數(shù)字輸入自定義屏幕尺寸。請注意，您可能需要重新加載網(wǎng)站才能使內(nèi)容正確適合
然而，設備模式最好的地方是頂部的設備預設。在這里，您可以選擇一些最常見的移動設備：不同型號的 iPhone 和三星的 Galaxy，以及不太常見的設備，如 Amazon Kindle Fire。
例如，以下是 Chrome 開發(fā)者工具在 iPhone X 上顯示我們網(wǎng)站的樣子：
當您從列表中選擇某些內(nèi)容時，會出現(xiàn)一個附加按鈕，允許您在縱向和橫向視圖之間切換。
很酷的是，這不是模擬，而只是瀏覽器窗口的不同視圖。這意味著您仍然可以瀏覽您想要的任何網(wǎng)站并查看它，包括本地開發(fā)站點。
Chrome 的設備模式也模擬通過手指而不是鼠標瀏覽。因此，當您將光標懸停在任何東西上時，不會有高光或顏色變化。您將獲得真正的移動體驗。
模擬不良連接
一個更復雜的功能是網(wǎng)絡節(jié)流模擬。要理解這一點，您需要記住，移動訪問者在未使用 WiFi 時通常會遇到較慢的網(wǎng)絡連接。
Chrome 的移動測試工具可以模擬這一點。在網(wǎng)絡旁邊頂部的另一個下拉菜單中，您可以選擇從 GPRS over 2G/3G/4G 到 WiFi 連接的任何網(wǎng)絡速度。
這樣，您可以進一步了解移動訪問者的用戶體驗，他們的速度可能會受到阻礙。它可以讓您了解瓶頸，例如大型圖像或其他在功能較弱的連接上加載緩慢的元素。
更好的是，這些預設僅對您的活動選項卡有效。您仍然可以在 Chrome 的其余部分中正常瀏覽。
2.?Firefox 響應式設計模式
Firefox 提供了與 Chrome 類似的工具。雖然它沒有競爭對手那么多的功能，但它對于測試 WordPress 網(wǎng)站的移動功能仍然非常有用。
您可以通過單擊菜單然后單擊“開發(fā)人員”>“響應式設計視圖”或在打開時單擊開發(fā)人員工具欄中的相應圖標來激活它。或者使用Ctrl-Shift+M。
響應式設計視圖的界面非常熟悉。就像在 Chrome 中一樣，您有一個用于常見預設尺寸及其相關設備的下拉菜單。
如果可用選項不符合您的需要，您還可以設置自定義尺寸并將它們保存為您自己的預設。除此之外，還可以手動縮小和擴大查看框。
和以前一樣，響應式設計視圖是瀏覽器的一部分，這意味著您可以瀏覽任何您想要的網(wǎng)址。它還可以模擬點擊控制而不是通過鼠標瀏覽。網(wǎng)絡節(jié)流模擬也可用。
Firefox 為自己爭取的另一件事是您可以關閉底部的開發(fā)人員工具欄并仍然使用移動測試工具。這讓我對 Chrome 感到惱火。
此外，無論大小如何，您都可以在橫向和縱向之間切換，并截取當前視圖的屏幕截圖，自動進入您的下載文件夾。
3. Safari 響應式設計模式
如果您主要在 Mac 上工作，則可以利用內(nèi)置于本機瀏覽器 Safari 中的響應式設計模式。要開始使用它，只需轉(zhuǎn)到Safari > Preferences > Advanced。然后，確保選中在菜單欄中顯示開發(fā)菜單旁邊的框。
開發(fā)菜單現(xiàn)在應該出現(xiàn)在菜單欄中。單擊它并選擇Enter Responsive Design Mode。
您現(xiàn)在應該在響應式視圖中看到您的網(wǎng)站，頂部列出了各種選項。您可以手動更改尺寸、選擇要模擬的瀏覽器視圖或設備。但是，所有設備預設都是 Apple 產(chǎn)品。因此，如果您想查看運行 Android 的設備的視圖，您需要手動輸入尺寸。
4.安卓SDK
我們的移動測試工具列表中的下一個：Android SDK（Google 相當于 XCode）。它適用于 Windows 和 MacOS X 以及其他平臺。它也可以免費使用，您可以在此處下載它作為 Android Studio 的一部分。
稍微不好的消息是它的設置有點復雜。另外，它的尺寸相當大。僅安裝程序的下載量就超過 1GB，標準安裝約 4GB — 并且還有更多。
下載完成后，您需要運行安裝程序。Mac 用戶必須解壓。之后，啟動Android Studio。單擊“配置”，然后單擊“ SDK 管理器”。從這里，您可以通過向下滾動列表并在旁邊的復選框中打勾來安裝最新的 Android 版本。
單擊安裝包以開始安裝過程。現(xiàn)在等等，這可能需要一段時間。
設置和使用虛擬設備
一切都完成后，是時候設置一些虛擬設備了。為此，請打開 AVD 管理器（配置 > AVD 管理器）。
您可以選擇創(chuàng)建自定義設備或在創(chuàng)建虛擬設備下選擇預設。完成后，單擊Next，配置 Android 版本和虛擬硬件并確認。該設備現(xiàn)在應該是您的 Android 虛擬設備 (AVD) 列表的一部分。
突出顯示一個并單擊播放按鈕啟動。決定是否將顯示縮放到實際大小（可能非常小），然后單擊Launch。模擬器可能需要一段時間才能運行，因為它首先必須啟動 Android。
接下來，在您的 AVD 上找到瀏覽器并轉(zhuǎn)到您想要查看的任何站點。使用工具欄在橫向和縱向模式之間切換。
雖然不是世界上最簡單的設置過程，但它絕對是大多數(shù)開發(fā)人員可以實現(xiàn)的。
5. XCode
檢查網(wǎng)站與 Apple 設備兼容性的最佳方法是該公司自己的 iOS 模擬器。它是 Apple 開發(fā)環(huán)境 XCode 的一部分。
好處是它是免費的。您只需要一個開發(fā)者 ID。但是，缺點是它僅適用于 Apple 設備。Windows 和 Linux 用戶必須找到其他方法來假裝擁有 iPhone 或 iPad。
如果您確實擁有 Mac 并為自己設置了 ID，則可以在此處獲取 XCode?。只需搜索其名稱并下載相應的版本即可。
使用 iOS 模擬器
iOS 模擬器是一個獨立的軟件，您可以這樣使用它。XCode安裝完成后，可以在這里找到：
- 瀏覽到應用程序，右鍵單擊XCode并選擇Show Package Contents。
- 然后轉(zhuǎn)到內(nèi)容 > 開發(fā)人員 > 應用程序。
- iOS 模擬器應出現(xiàn)在列表中。您可以在 Dock 中創(chuàng)建快捷方式以便快速訪問。
打開后，您可以通過主菜單中的文件 > 打開模擬器更改設備。
要測試您的網(wǎng)站，請在您的虛擬設備上打開瀏覽器并輸入任何網(wǎng)址。請注意，這也適用于本地開發(fā)環(huán)境，模擬設備可以訪問您的 Mac 可以訪問的任何站點。
而已。恭喜，您現(xiàn)在虛擬機上擁有所有 Apple 設備。在吹牛方面不太有用，但作為 WordPress 網(wǎng)站的移動測試工具非常方便。
Windows 用戶的快速說明：有多種方法可以在 Windows 上運行 XCode。但是，他們都相當令人費解，而不是最實用的。如果你正在尋找一個更舒適的解決方案來檢查您的網(wǎng)站，建議購買一臺Mac。
6.Opera Mini
雖然肯定不是最流行的瀏覽器，但 Opera 仍然在相當多的移動設備上使用，尤其是舊型號。通常，Opera 是這些設備的最佳可用瀏覽器選項。因此，您應該測試以查看您的網(wǎng)站是否在其中正確加載。
盡管 Opera Mobile Emulator 現(xiàn)在已不復存在，但您仍然可以在 Android 設備上下載 Opera Mini 瀏覽器。這可以讓您測試您的網(wǎng)站如何加載第一手資料。它至少能讓您一瞥那些運行 Opera 移動經(jīng)典瀏覽器的用戶在登陸您的網(wǎng)站時的體驗。
7.BrowserStack
Browserstack 是一個基于 Web 的平臺，具有用于在不同環(huán)境、操作系統(tǒng)、瀏覽器和移動設備中測試網(wǎng)站的工具。它是一種付費解決方案，可訪問 50 多種不同操作系統(tǒng)的移動設備。您可以通過多種方式使用它。
例如，您可以使用實時跨瀏覽器測試來測試網(wǎng)站，為大型項目執(zhí)行自動化測試，或進行視覺測試。或者，如果您需要測試應用程序，您可以使用應用程序?qū)崟r功能在模擬移動設備上對應用程序進行實時測試或進行自動化測試。起價為每月 29 美元，按年計費。
8.?LambdaTest
另一種基于瀏覽器的 WordPress 網(wǎng)站測試方法是 LambdaTest。它是一種基于云的自動化瀏覽器測試工具，可使用 2,000 多種不同的瀏覽器和操作系統(tǒng)。這個數(shù)字應該可以讓您確保您的網(wǎng)站無論以何種方式被訪問都看起來很棒。
您可以跨模擬的移動瀏覽器進行 Selenium 測試自動化、測試本地托管站點、執(zhí)行地理位置測試，甚至進行調(diào)試。
9.Mobile-Friendly Test
隨著谷歌對移動友好性的持續(xù)強調(diào)，他們提供一種工具來分析您的網(wǎng)站的表現(xiàn)是有道理的。輸入 URL 后，移動測試工具不僅會檢查您的網(wǎng)站的響應能力，還會檢查其他適合移動設備的標記，例如頁面加載時間。
10. MobileTest.me
這項服務讓您可以在六種不同的流行設備上測試您的網(wǎng)站，其中包括 HTC One、Google Nexus 7 和 Apple iPad Mini。您需要做的就是單擊一個，輸入一個網(wǎng)址，您就可以開始了。它也是免費的，這很好。誠然，這不是最新的測試選項，但它無疑是一種快速簡便的方法，無需打開錢包即可測試多個舊設備的兼容性。
11. Responsinator
下一個是響應者。它為多種不同的 Android 和 iOS 設備提供測試，從 iPhone 5 到“蹩腳的 Android 設備”（原文如此！）到 Nexus 4。像往常一樣，輸入任何地址，相應的網(wǎng)站將顯示在所選的屏幕上設備。它沒有翻轉(zhuǎn)選項，但您也可以為每個設備選擇橫向視圖。
12. Screenfly
我們的移動測試工具列表中的最后一個條目是 Screenfly 提供了相當不錯的設備范圍，包括電視和臺式電腦。但是，列表中還有很多平板電腦和手機。它可以免費使用，界面非常直觀。強烈建議做一些快速檢查！
移動測試工具可滿足所有需求
來自移動設備用戶的流量對于運行網(wǎng)站的任何人來說都變得非常重要，并且只會繼續(xù)增長。因此，專業(yè)處理網(wǎng)站的人很難確保他們知道如何使網(wǎng)站在訪問者的手機和平板電腦上看起來不錯并正常運行。
許多移動測試工具可用于檢查 WordPress 網(wǎng)站的功能。從 iOS 和 Android 模擬器上的瀏覽器工具到第三方 Web 解決方案，開發(fā)人員和用戶不乏選擇。
每個工具都有自己的優(yōu)點和缺點。然而，他們中的大多數(shù)人的共同點是，它們絕對比投資于現(xiàn)實生活中的設備便宜。
上述解決方案應該足以測試大多數(shù)用例。您選擇哪一種取決于您自己的需求和喜好。最后，重要的是結(jié)果。您的移動訪問者會感謝您。
您如何測試您的網(wǎng)站的移動功能？有什么工具可以推薦嗎？我們很想聽聽您的意見。
注：本文出自 torquemag.io，由 WordPress大學 翻譯整理。
