Responsive Design (RWD) 響應式網頁設計測試要點

woff

注意 本文章並非 RWD 技術教學，此為針對已經會做 RWD 的設計師，完成後的檢查列表。

新手 可以看一下什麼是 RWD, 中文

1. 視窗與容器

• 檢查各寬度是否有橫向 scrollbar（捲軸）出現，若有則檢查是什麼元素凸出容器
• 檢查是否有 1px 誤差的 media query 設定，如 min-width, max-width 都設為同樣的寬度，就可能出現此跳動問題（此問題在舊版的 bootstrap 也曾發生過）
• 檢查有設定 position: fixed; 的元件，需檢查最小寬度與最小高度是否會被隱藏導致無法操作，或反過來佔有過多螢幕空間導致遮蔽太多內容區域
  

2. 文字

• 標題斷行狀況，可參考 macho.js 或是 balance-text
• 設定斷行禁則，例如公司名稱或不可斷句之處可以設 white-space: nowrap;
• 過長連續文字，例如網址過長超出畫面是否有設定 word-break: break-all;
• 透過 media query 設定 br { display: none; } 也可改變不同寬度不斷行的方法
• 內文一行是否超過 25—30 字難以閱讀，超過則視情況放大字體，若不及則縮小字體。
  

3. 圖片

• img 元件若超出內容框 是否會隨容器寬度縮小，視情況設定為 width: 100%;或 max-width: 100%;
• img 標籤若有指定 height 是否有被 css 重設為 height: auto;
  

4. 常用 plugin

• 任何的互動如有 hover 才動作的設定，改為其他方式
• 互動按鈕是否夠大足以讓手指瞄準該按鈕
• 過度消耗 CPU, GPU 資源的特效需偵測 user-agent 為桌面瀏覽器才做，或使用有相同意義的圖片取代
• 如有使用類似 Scroll To Fixed 的固定方式，視情況在 mobile 取消或隱藏
• js 簡易偵測方式 可偵測 user-agent 或使用 Modernizr
• 取消類似 lightbox 滿版效果，或是特別設計手機版呈現方式
• 社群媒體如 facebook 的分享元件寬度是否會超出版面
• 社群媒體 embed 的 iframe 高度是否有垂直跳動問題，可透過 min-height 解決
• 第三方廣告 embed 的 flash 或是 iframe 是否處理妥當或隱藏
  

5. Media

• flash media 像是 youtube, vimeo 是否有修改為彈性縮放，可參考 FITVIDS.JS或是 Intrinsic Ratios
  

測試方式

• 手動縮放測試的瀏覽器寬度與高度
• 使用 縮放補助工具 / bookmarklet
• 多個實體裝置，使用 fire.app 的 auto livereload
• 安裝 Xcode 開啟 iOS simulator
• 安裝 Android SDK
  

縮放補助工具

• VIEWPORT RESIZER
  最真實，含 zoom 效果
• The Responsinator
  給客戶一覽用，效果不錯
• Responsive Design Bookmarklet (Victor Coulon)
  優點是含鍵盤佈局
• Responsive Design bookmarklet (benjaminkeen)
  速度最快，但缺點是JS會失效
• Screenqueries
• Resizer // A responsive design bookmarklet
  

不支援 media query 的瀏覽器

• IE 8 以前
• firefox 3 以前
• safari 3 以前
• Opera 9 以前
  

解決方案 Respond

gpfid

非常感谢啊！












择天记