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)