1:HTML5 学习
( 开发前的准备
要想使 Web 页面从一般的页面变成支持移动设备的页面,Web 应用程序可以在几个方面进行修改。虽然页面可以在 WebKit 中正确呈现,但是,一个以鼠标为中心的设备(比如笔记本或台式机)与一个以触摸为中心的设备(比如一个 iPhone 或 Android 智能手机)还是有区别的。其中主要的一些差异包括 “可单击” 区域的物理大小、“悬浮样式” 的缺少以及完全不同的事件顺序。如下所列的是在设计一个能被移动用户正常查看的 Web 站点时需要注意的一些事情:
- iPhone/Android 浏览器呈现的屏幕是可读的 — 大大好于传统的移动浏览器 — 所以不要急于草草制作您网站的移动版本。
- 手指要大过鼠标指针。在设计可单击的导航时要特别注意这一点 — 不要把链接放得相互太靠近,因为用户不太可能单击了一个链接而不触及相邻的链接。
- 悬浮样式将不再奏效,因为用手指不能进行用鼠标指针进行的 “悬浮”。
- 诸如 mouse-down、mouse-move 等事件在基于触摸的设备上自然大相径庭。这类事件中有一些将被取消,不要指望移动设备上的事件顺序与桌面浏览器上的一样。
这其中的细节在 iPhone in Action 内有详述(参见 参考资料)。而从我们的目的考虑,我们将更多地着重于 WebKit 所能做的,而不是它不能做的。
让我们来看看要使一个 Web 站点对 iPhone 或 Android 访客具有友好性所面临的最为明显的一个挑战:屏幕大小。我们今天使用的实际移动屏幕尺寸是 320x480。请注意由于用户可能会选择横向查看 Web 内容,所以屏幕大小也可以是 480x320。正如我们在图 1 中看到的,WebKit 将能很好地呈现面向桌面的 Web 页面,但是文本可能会太小以至于若不进行缩放或其他操作就无法有效阅读内容。那么,我们该如何应对这个问题呢?
最为直观也是最不唐突的适合移动用户的方式是通过使用一个特殊的 metatag:viewport。
metatag 是一个放入 HTML 文档的 head 元素内的 HTML 标记。如下是一个使用 viewport 标记的简单例子:<meta name="viewport" content="width=device-width" />
。当这个 metatag 被添加到一个 HTML 页面后,我们看到此页面被缩放到更为适合这个移动设备的大小,如图 2 所示。如果浏览器不支持此标记,它会简单地忽略此标记