blog 原文好讀版... http://blog.evendesign.tw/post/48853824439/rwd-test **注意** 本文章並非 RWD 技術教學，此為針對已經會做 RWD 的設計師， 完成後的檢查列表。 **新手** 可以看一下什麼是 [RWD](http://en.wikipedia.org/wiki/Responsive_web_design), [中文](http://zh.wikipedia.org/wiki/响应式网页设计) ### 1. 視窗與容器 1. 檢查各寬度是否有**橫向 scrollbar（捲軸）出現**，若有則檢查是什麼元素凸 出容器 2. 檢查是否有 1px 誤差的 media query 設定，如 `min-width`, `max-width` 都 設為同樣的寬度，就可能出現此跳動問題（此問題在[舊版的 bootstrap 也曾發 生過](https://github.com/twitter/bootstrap/issues/1531)） 3. 檢查有設定 `position: fixed;` 的元件，需檢查最小寬度與最小高度是否會被 隱藏導致無法操作，或反過來佔有過多螢幕空間導致遮蔽太多內容區域 ### 2. 文字 1. **標題斷行狀況**，可參考 [macho.js](https://github.com/dryman/Macho.js) 或是 [balance-text](https://github.com/adobe-webplatform/balance-text) 2. 設定斷行禁則，例如**公司名稱或不可斷句之處**可以設 `white-space: nowrap;` 3. 過長連續文字，例如**網址過長超出畫面**是否有設定 `word-break: break-all;` 4. 透過 media query 設定 `br { display: none; }` 也可**改變不同寬度不斷行** 的方法 5. **內文一行是否超過 25—30 字**難以閱讀，超過則視情況放大字體，若不及則縮 小字體。 ### 3. 圖片 1. **img 元件若超出內容框** 是否會隨容器寬度縮小，視情況設定為 `width: 100%;` 或 `max-width: 100%;` 2. **img 標籤若有指定 height** 是否有被 css 重設為 `height: auto;` ### 4. 常用 plugin 1. 任何的互動如有 **hover 才動作的設定**，改為其他方式 2. **互動按鈕是否夠大**足以讓手指瞄準該按鈕 3. **過度消耗 CPU, GPU 資源的特效**需偵測 user-agent 為桌面瀏覽器才做， 或使用有相同意義的圖片取代 4. 如有使用類似 [Scroll To Fixed] (http://bigspotteddog.github.io/ScrollToFixed/) 的固定方式，視情況在 mobile 取消或隱藏 5. js 簡易**偵測方式** 可 [偵測 user-agent](https://gist.github.com/evenwu/5151795) 或使用 [Modernizr](http://modernizr.com) 6. 取消類似 **lightbox 滿版**效果，或是特別設計手機版呈現方式 7. **社群媒體如 facebook 的分享元件寬度**是否會超出版面 8. **社群媒體 embed 的 iframe 高度是否有垂直跳動問題**，可透過 min-height 解決 9. **第三方廣告 embed 的 flash 或是 iframe** 是否處理妥當或隱藏 ### 5. Media 1. flash media 像是 **youtube, vimeo** 是否有修改為彈性縮放，可參考 [FITVIDS.JS](http://fitvidsjs.com) 或是 [Intrinsic Ratios] (http://alistapart.com/article/creating-intrinsic-ratios-for-video) ## 測試方式 - 手動縮放測試的瀏覽器寬度與高度 - 使用 縮放補助工具 / bookmarklet - 多個實體裝置，使用 [fire.app](http://fireapp.handlino.com) 的 auto livereload - 安裝 [Xcode](https://developer.apple.com/xcode/) 開啟 iOS simulator - 安裝 [Android SDK](http://developer.android.com/sdk/index.html) ## 縮放補助工具 - [VIEWPORT RESIZER](http://lab.maltewassermann.com/viewport-resizer/) 最真實，含 zoom 效果 - [The Responsinator](http://www.responsinator.com) 給客戶一覽用，效果不錯 - [Responsive Design Bookmarklet (Victor Coulon)] (http://responsive.victorcoulon.fr) 優點是含鍵盤佈局 - [Responsive Design bookmarklet (benjaminkeen)] (http://www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/) 速度最快，但缺點是JS會失效 - [Screenqueries](http://screenqueri.es) - [Resizer // A responsive design bookmarklet] (http://codebomber.com/jquery/resizer/) ## 不支援 media query 的瀏覽器 - IE 8 以前 - firefox 3 以前 - safari 3 以前 - Opera 9 以前 解決方案 [Respond](https://github.com/scottjehl/Respond) http://blog.evendesign.tw/post/48853824439/rwd-test --

※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 114.34.100.58 修改排版... ※ 編輯: evenwu 來自: 114.34.100.58 (04/29 03:41)