[[117737]]

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

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

1. 在真實的移動設備上測試

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

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

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

2. 使用 iOS 或者 Android 模擬器

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

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

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

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

3. 在 BrowserStack 上測試

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

這是一個有償服務，但是我要指出，這并不是一個有償的支持。然而，這些年我發現了一下免費的屏幕截圖服務，就像成語說的，you get what you pay for。BrowserStack 并不只是屏幕截圖，因為他們也使得直接與測試設備交互成為可能。即使你有一個移動設備測試套件，BrowserStack 依然可以非要有效的幫你填補一些你可能沒發現的漏洞。

4. 使用 Responsinator 檢測

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

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

5. 調整你的瀏覽器大小

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

你是如何測試的呢？

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

原文地址：treehouse blog
譯者：Specs