注意 本文章並非 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測試方式縮放補助工具不支援 media query 的瀏覽器- IE 8 以前
- firefox 3 以前
- safari 3 以前
- Opera 9 以前
|