优先手机访问的网页设计.pdfVIP

手机为先的网页设计 原文：/en/mobile/responsivedesign/ 译：mobitest@163.com 2012-7-19 目录 简介 2 适配的必要性 2 例子：小众产品明细页 2 结构 3 设置VIEWPORT 3 内容块 3 HTML 特殊字符 3 电话：URI 项 3 样式4 对大屏幕使用单独的样式4 手机为先的风格4 使用MEDIA QUERIES 5 使用相对单位 6 利用CSS 来减少请求 6 行为 7 导航 7 画册9 相关内容 10 定位 12 下一步 12 可适应图片 12 更少JS 12 离线访问 12 结论WRAPPING UP 13 简介 我们将介绍如何创建可以适应不同设备、手机为先的网页。本文及演示将包括以下内容：  为什么需要建立面向手机、响应性、可适应的体验  如何组织网站中的HTML 来优化性能并且提高弹性  如何编写CSS，先定义共享的样式，为大些的屏幕建立媒体查询样式，以及使用相对 单位  如何编写脚本懒加载内容块、利用触摸事件以及定位信息  可以用来进一步加强可适配体验的东西 适配的必要性 互联网图景日趋复杂，面对日益膨胀的内容，传递可靠的体验已经变得越来越重要。可喜的 是，“面向响应的网页设计”带给网页设计师们一些工具，可以设计出适用于任意屏幕尺寸 的布局。使用流动表格、弹性图片和媒体查询等手段，可以使布局最大程度上与设备屏幕大 小这一维度无关。 但手机环境不仅仅只是屏幕尺寸。手机设备随身携带，打开即用。因为人们总是随时带着手 机，可以通过各种形式连网，在躺椅上使用信号强大的WI-FI，外出时使用3G 或EDGE。 另外，触屏带来了与内容直接交互的新形式，在手机生物工程学上引发了对布局和功能的另 一种思考。 为了建立确实面向手机环境的网站，但又不局限于小屏幕，需要确保清除了手机开发过程中 的众多障碍。手机内容的限制，迫使我们聚焦于哪些内容是必需，以及如何尽可能快地呈现 内容。建立快速加载、优化的体验[手机为先]，对平板、桌面及其他存在的环境具有高屋建 瓴的作用。 例子：小众产品明细页 观看演示 演示中是一个简单的电子商务网站的产品明细页，为某T 恤公司制作。为什么选择它？电 子商务网站具备很多跨设备的场景。比如，70%的智能手机用户在商店购物过程中使用手机。 因此在使购物变得更容易的同时，也将尽力使产品评论容易访问，利用使用者的位置来加强 手机体验。 结构 应用得当的 HTML5 语法标记，使可适应体验变得可管理、可控制，也为增强体验带来机会 （小例子：使用合适的HTML5 输入类型，在触控设备上弹出适合的虚拟键盘）。语法标记 适应性特别广泛，可以在许多移动设备、平板、桌面浏览器以及未来支持网页的设备上使用， 撇开特性集的支持能力不谈。 设置VIEWPORT 为了适应没有为手机屏幕优化的网站，许多现代手机浏览器使用大的浏览器视点，以便获得 更好的视觉效果。用户可以用手势放大需要的部分。这对于非手机浏览器来说已经不错了， 但为了优化手机浏览器中的体验，可以使用viewpoint 标记来将页面宽度设为设备的宽度： meta name=viewport content=width=device-width, initial-scale=1 / 注意这里没有限制用户放大页面的能力（可以添加user-scable=no 来禁止），尽管已经为 小屏幕优化了内容。建议保留用户缩放能力，以尽可能好用。当然，也有需要禁用缩放的场 景，当包含固定位置的元素时。 内容块 为使网页尽可能保持轻盈、改善加载时间，另有两个演示辅助内容的HTML 文档： reviews.html 与related.html。因为该内容在主要使用场景（购买）中并非必要，缺省不加 载