[[117737]]

移動瀏覽器的使用與日劇增。據(jù) StatCounter 統(tǒng)計，手機和平板電腦產(chǎn)生的流量約占網(wǎng)絡(luò)流量的30%左右。這就意味著消費者對移動網(wǎng)站的需求比以往任何時候都高。鑒于消費者各種各樣的移動設(shè)備，即使是像 Mobile-first 響應(yīng)式式設(shè)計這樣的智能技術(shù)，在站點交付前的測試也是非常關(guān)鍵的。

現(xiàn)在有很多種在移動設(shè)備上測試站點的方式，但它們并不都是一樣的。這里提供了五種不同的測試移動站點的方式，從最理想的到最不有利的方式排序。

1. 在真實的移動設(shè)備上測試

在真實的設(shè)備上測試站點一直都是***的方式，因為有很多經(jīng)驗不是簡單的模仿或偽造就能實現(xiàn)的。用戶體驗包含了許多因素，如可變的網(wǎng)絡(luò)條件、像素密度、目標(biāo)的相對大小以及真實的頁面加載時間。最***的情況是每一個站點都可以在任何一個可能瀏覽它的設(shè)備上進行測試。

當(dāng)然，這樣全面的測試并不實際，因為任何一個項目都要考慮到時間和金錢這些因素。然而，在移動設(shè)備測試套件上的投資依然是一個明智之選。如果你運行 著一個有著比較大的客戶群的業(yè)務(wù)時，這還是非常必要的。移動設(shè)備測試套件通常情況下都考慮到了大部分比較流行的移動瀏覽器設(shè)備。這使得在真實條件下的物理 測試成為可能，并且允許接近于1比1的真實用戶體驗。Brad Forst 寫過一篇很好的文章是關(guān)于哪些移動設(shè)備是需要進行測試的（文章是幾年前的了，但是總得原則還是一樣的）。

如果一套移動設(shè)備測試套件超出了你的預(yù)算，那么剩下的***的辦法就是用你自己的智能手機和移動設(shè)備了。最可能的情況是你使用的是iOS或者 Android系統(tǒng)的手機，這至少會讓你知道很大一部分人看到后的一些想法。如果你的朋友或者家人正在使用其他的系統(tǒng)設(shè)備時，你也可以通過他們收設(shè)備很快 的檢測一下你的站點。

2. 使用 iOS 或者 Android 模擬器

沒有任何東西可以代替物理硬件，但軟件模擬器還是不錯的。iOS 和 Android 模擬器主要是為了測試本地應(yīng)用程序而設(shè)計的，但他們也包括了每個設(shè)備的默認(rèn)瀏覽器，這將使你可以看到非常近似的頁面瀏覽效果。我說近似是因為它們并不是真 正的網(wǎng)絡(luò)環(huán)境、頁面加載速度、目標(biāo)相對大小以及一些其他通過物理設(shè)備獲得的細(xì)節(jié)。然而渲染引擎可以幫你發(fā)現(xiàn)跨瀏覽器問題的功能還是等效的。

包含在 Xcode 內(nèi)的 iOS 模擬器可以讓你輕松的看到站點在 iPhones 和 iPads 上的顯示效果。

iOS 模擬器是 Xcode 內(nèi)提供的一個工具。首先，通過 Mac App Store 安裝 Xcode。然后打開 Xcode 工具欄，選擇 Xcode > Open Developer Tool > iOS Simulator。不幸的是 Xcode 只是用于 Mac系統(tǒng)，因此，如果你使用的是 Windows 或 Linux 系統(tǒng)的話，你必須通過另一種方式來測試。

Android 模擬器包括了 Android SDK。在這你可以了解更多 Android 模擬器的信息。

3. 在 BrowserStack 上測試

如果你手邊沒有設(shè)備測試套件，并且安裝 iOS 和 Android 模擬器也不起作用，這里依然有很多其他的選擇。BrowserStack 是一個提供了訪問桌面和移動設(shè)備的 Web服務(wù)，使得專業(yè)的網(wǎng)絡(luò)人員可以測試他們的站點。

這是一個有償服務(wù)，但是我要指出，這并不是一個有償?shù)闹С帧Ｈ欢@些年我發(fā)現(xiàn)了一下免費的屏幕截圖服務(wù)，就像成語說的，you get what you pay for。BrowserStack 并不只是屏幕截圖，因為他們也使得直接與測試設(shè)備交互成為可能。即使你有一個移動設(shè)備測試套件，BrowserStack 依然可以非要有效的幫你填補一些你可能沒發(fā)現(xiàn)的漏洞。

4. 使用 Responsinator 檢測

你可能力求在真實的設(shè)備或至少一個精確的模擬設(shè)備上進行測試。然而，由于種種原因，這基本是不可能的，你可能只是通過改變桌面瀏覽器的大小來測試。有很多不錯的工具可以這么做，但這類工具中最簡單的之一是 Responsinator。

你訪問 Responsinator 的網(wǎng)站，在網(wǎng)頁頂端的輸入你的URL，它將為你生成一些主流設(shè)備上的即時預(yù)覽。這對快速的“sanity check”是有幫助的，但請記住，這不能替代真正的設(shè)備，甚至是模擬器，因為它用的是和你的瀏覽器一樣的渲染引擎。換句話說，它并不會奇跡般的使用手機 瀏覽器的渲染引擎來渲染你的網(wǎng)站。相反的，它只是調(diào)整你的瀏覽器到一個特定的大小。

5. 調(diào)整你的瀏覽器大小

在開發(fā)網(wǎng)站的時候，設(shè)計者和開發(fā)者通過調(diào)整瀏覽器大小來快速檢測是一種非常通用的方式。編碼的時候這么做是非常值得鼓勵的。然而，這只是測試的最基 本形式，甚至根本都稱不上“測試”。雖然在你更改代碼這種方法可以非常快速的進行檢查，但它根本不能和其他方法相比。瀏覽器的大小是任意的、渲染引擎是不 同的、沒有網(wǎng)絡(luò)延遲等等。這種方法跟現(xiàn)實世界的嚴(yán)謹(jǐn)性有太多的差異。

你是如何測試的呢？

這并不是一個完整的列表。雖然這覆蓋了大部分手機站點測試的分類方法，但仍然有些不同點我可能忽略了，肯定有一大部分的相應(yīng)式測試工具我沒有提到。如果你有自己獨特的測試移動站點的方式，或者你用一種這里沒有提到的方法進行測試，我很想在評論里看你你的方法。

原文地址：treehouse blog
譯者：Specs