[心得] Responsive Design (RWD) 測試要點
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)
推
04/29 14:48, , 1F
04/29 14:48, 1F
推
04/29 18:33, , 2F
04/29 18:33, 2F
推
04/29 23:30, , 3F
04/29 23:30, 3F
推
04/30 02:13, , 4F
04/30 02:13, 4F
推
04/30 09:23, , 5F
04/30 09:23, 5F
→
05/01 04:33, , 6F
05/01 04:33, 6F
推
03/18 15:40, , 7F
03/18 15:40, 7F