[轉貼evendesign blog]Responsive Design (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