我們每天通過多種設備訪問互聯(lián)網(wǎng)。移動電話，臺式機/筆記本電腦，平板電腦，平板電腦......我們所掌握的設備數(shù)量已經(jīng)增長為天文數(shù)字。作為消費者，體驗很棒。我們可以隨時隨地在任何設備上自由訪問互聯(lián)網(wǎng)。但對于Web開發(fā)人員，設計人員和測試人員來說，這是一場噩夢。
軟件團隊需要找到構(gòu)建和設計的方法，以適應所有這些設備和瀏覽器。響應式網(wǎng)站就是這樣做的 - 根據(jù)正在查看的設備做出響應。
什么是響應式網(wǎng)頁設計？
響應式網(wǎng)頁設計是一種以響應用戶行為和需求的方式進行設計和開發(fā)的方法。換句話說，響應式設計可確保網(wǎng)站針對所有設備進行優(yōu)化。 Ethan Marcotte在2010年首次向全世界介紹了“響應式設計”的概念。響應式網(wǎng)頁設計的目標是讓一個網(wǎng)站在所有瀏覽器和設備上都能很好地展示。
響應式網(wǎng)頁設計意味著您正在構(gòu)建您的網(wǎng)站，并了解它可以在任何瀏覽器或設備上查看。您不能假設您的CSS和Javascript只會在所有設備上神奇地工作，您需要為此進行規(guī)劃，最后您需要對其進行測試。
響應式網(wǎng)站測試技巧
如果時間和預算不受限制，我們可以一直在所有設備和瀏覽器上進行測試。但現(xiàn)實是不允許的，沒有那么多資源（時間或者設備）。
10個通用響應式網(wǎng)站檢查
以下是您希望在跨設備/瀏覽器的測試中涵蓋的一些基本測試：
1. 網(wǎng)站是否加載？ - 你會對這個問題出現(xiàn)的頻率感到驚訝。不要制作只能在某個瀏覽器上才能運行的網(wǎng)站。
2. 可點擊/可點擊區(qū)域是否合適？ - 沒有什么比點擊按鈕卻看不到任何效果更令人沮喪的了。舉個例子：您需要確保系統(tǒng)能在當今所有不同類型的設備上都可以響應“輕觸”操作。
3. 設備的內(nèi)邊距？ - 留意不同設備間的填充差異。
4. 文字是否正確對齊？ - 您可能需要跨設備以不同方式定位某些文本元素。
5. 所有瀏覽器的字體呈現(xiàn)方式是否相同？ - 字體引入了一個全新的問題世界。確保您的字體在所有設備上都可讀。
6. 按鈕/元素是否缺失？ - 您的CSS很可能需要修改才能使某些元素出現(xiàn)在所有設備/瀏覽器上。
7. 頁面內(nèi)容是否在中心對齊？ - 同樣，某些設備可能存在需要調(diào)整的對齊問題。
8. 每個斷點是否顯示最重要的元素？ - 定義斷點非常重要，并確保在較小的屏幕上查看您的站點時，所有重要的內(nèi)容都可見。
9. 有沒有javascript錯誤？ - 檢查這些表面級錯誤將立即解決許多其他問題。
10. 動態(tài)數(shù)據(jù)是否正確顯示？ - 確保CSS和HTML表格正確響應并包含動態(tài)內(nèi)容。
是否感到不知所措？不要吝嗇為自己的產(chǎn)品來投入設計團隊。畢竟，他們會更好地了解這些東西應該設計成什么樣子。
優(yōu)先考慮設備和瀏覽器
不要一開始就抓取設備來測試。要有目的地進行測試。了解您的受眾群體，并根據(jù)該信息確定設備和瀏覽器的優(yōu)先級。使用數(shù)據(jù)來推動這些決策。Google Analytics（分析）將為您提供人們查看您網(wǎng)站（瀏覽器，平板電腦，移動設備）的基本細分方式。您可以使用移動設備報告進一步了解這一點，以查看哪些類型的設備正在訪問您的網(wǎng)站，甚至是這些設備的屏幕尺寸。
一旦確定要測試的設備和瀏覽器列表，就需要跟蹤每個測試的結(jié)果。
響應式網(wǎng)站測試工具和資源
對于您要測試的設備，您需要親自操作。購買一堆設備可能會花銷很大。特別是考慮到每年上市的所有新手機，平板電腦和臺式機。這就是為什么社區(qū)聚集在一起并開發(fā)模擬器的原因。下面是在跨設備進行測試時需要考慮的一些工具和資源：
BrowserStack - 行業(yè)領導者，提供跨瀏覽器和多設備測試的工具。CrossBrowserTesting - 類似于BrowserStack，CBT允許您模擬設備和瀏覽器。BrowserShots - 免費的開源工具，可在各種不同的Web瀏覽器中生成您網(wǎng)站的屏幕截圖。Browserling - 實時跨瀏覽器網(wǎng)站測試允許您更改屏幕大小以進行響應式測試。Google Dev Tools設備模式 - 允許您在不同的屏幕尺寸和分辨率下模擬您的網(wǎng)站。Responsinator - 讓您快速了解您的網(wǎng)站在蘋果和Android熱門產(chǎn)品上的外觀。Labcase - 將物理設備運送到您的辦公室進行測試的服務。OpenDeviceLab.com - 一種草根運動，使開發(fā)人員和測試人員能夠訪問更多種類的設備。LabUp！ - 幫助世界各地的人們建立非營利性開放式設備實驗室，以便為測試提供各種設備。Ghostlab - 同時在多個瀏覽器/設備上測試您的網(wǎng)站或應用程序。查看跨瀏覽器工具列表，了解可以幫助進行響應式瀏覽器測試的其他工具。
最后
響應式網(wǎng)站設計在軟件開發(fā)領域引入了一些復雜性。在我們?yōu)榫W(wǎng)絡編寫和設計時，它讓我們保持警覺。通過測試響應能力，您可以確保用戶在任何設備上訪問您的網(wǎng)站時都能獲得成功。
