[[117737]]

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

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

1. 在真實(shí)的移動(dòng)設(shè)備上測(cè)試

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

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

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

2. 使用 iOS 或者 Android 模擬器

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

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

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

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

3. 在 BrowserStack 上測(cè)試

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

這是一個(gè)有償服務(wù)，但是我要指出，這并不是一個(gè)有償?shù)闹С帧Ｈ欢?，這些年我發(fā)現(xiàn)了一下免費(fèi)的屏幕截圖服務(wù)，就像成語(yǔ)說(shuō)的，you get what you pay for。BrowserStack 并不只是屏幕截圖，因?yàn)樗麄円彩沟弥苯优c測(cè)試設(shè)備交互成為可能。即使你有一個(gè)移動(dòng)設(shè)備測(cè)試套件，BrowserStack 依然可以非要有效的幫你填補(bǔ)一些你可能沒(méi)發(fā)現(xiàn)的漏洞。

4. 使用 Responsinator 檢測(cè)

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

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

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

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

你是如何測(cè)試的呢？

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

原文地址：treehouse blog
譯者：Specs