2014
07
02

[轉貼evendesign blog]Responsive Design (RWD) 響應式網頁設計測試要點

關鍵字:CSS3RWD響應式網頁自適應網頁

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
傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:service@julyinfo.com | 臺北市大安區和平東路3段257號6樓map

© 2016 傑立資訊 All rights reserved.法律顧問:宇恒法律事務所