怎樣測試 RWD 響應式網站

日期：

UIUX 賴社群問到一個問題「請問現在業界檢查 RWD，還是用把視窗逐漸縮小的方法嗎？」建議測試 RWD 響應式網站的方法是實際拿行動裝置進行測試與檢查網頁有沒有跑版，而不要太信賴模擬器。

Photo by Omar Prestwich on StockSnap


什麼是響應式網站 (Responsive Web Design) 設計？

是一種網頁設計的技術，這種設計可使網站在不同的裝置（從桌面電腦顯示器到行動電話或其他行動裝置）上瀏覽時對應不同解析度皆有適合的呈現，減少使用者進行縮放、平移和捲動等操作行為。(資料來源：維基百科)

響應式網站測試方法：

網路搜尋測試方法有四：

  1. 實體行動裝置進行測試
  2. 在模擬器網站服務，輸入網址進行測試
  3. 桌機板 Google Chrome 或微軟 Edge 瀏覽器的開發人員工具的「裝置模擬」
  4. 透過桌機板瀏覽器擴充套件，例如 User Agent Switcher，修改為行動裝置的 User Agent

如果網頁設計不複雜，方法 2 & 3 或許沒有問題。但是隨著設計複雜化 (客戶的慾望是無窮的) ，實際測試模擬結果，跟實體行動裝置會不一樣。模擬器看起來正常、但是發生行動裝置會跑版的狀況。因此建議測試方式是使用實體行動裝置進行測試。

但是行動裝置有這麼多種，要選擇使用哪一個行動裝置？如果不清楚自己的目標受眾是使用 Android 或 iPhone 手機？可以進行訪問，或者從手機作業系統市占率、手機螢幕解析度大小的市占率的排名資料中，先採用熱門的選項。

測試響應式網站與測試一般網站的差異在於：增加不同行動裝置。也因此除了原本的網站功能頁面，需要針對不同行動裝置的內容呈現與預期網頁功能進行確認。

相關工具網站

相關資料

留言

張貼留言