Responsive Design (RWD) 響應式網頁設計測試要點
注意 本文章並非 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
非常感谢啊！
static/image/common/sigline.gif
择天记
頁:
[1]