《WebKit技术内幕》学习之十三（2）：移动WebKit

2　移动化用户界面

        HTML5为移动领域做了大量的工作，其中“meta”标签中的众多设置值能够帮助提供非常好的移动用户体验。一个典型的例子就是上面提到的用该标签来控制网页缩放，如示例代码13-2使用了一些JavaScript代码来完成，而实际上，“meta”标签能够非常简单地完成这一目的，方式如下所示。

    <meta name="viewport" content=" user-scalable=no">

        非常简单的一行代码，就能够将缩放功能取消而不需要相对复杂的JavaScript代码，遗憾的是，目前“meta”标签只能用来控制缩放，而没有能力解决不能翻页的问题。而WebKit很好地解决了这一问题，不过这仅仅是个开始，下面介绍一些WebKit支持的非常有用和常见的功能。

        首先是同Viewport相关的功能。使用meta标签最常见的设置就是“viewport”，视窗的概念之前介绍过，它表示当前可视的区域。因为设备的大小有差异，所以如何使网页的宽度适合屏幕的宽度就显得非常重要了（根据之前的讨论，其实垂直方向上的长度没有宽度重要），方式如下所示。

    <meta name="viewport" content="width=device-width, initial-scale=0.9, minimum-scale=0.5, maxium-scale=1.0, user-scalable=no">

        上面这段代码相对比较容易理解，设置的名字是“viewport”，视窗的宽度就是设备的宽度，而初始缩放大小是0.9，最小的缩放比例是0.5，最大的缩放比例是1.0，而且不允许用户使用手势来缩放它们。但是这只是解决了部分问题，因为如果设备差异特别大，那么过大的缩放比例对用户的体验是灾难性的，用来应对这一灾难的

        就是稍后介绍的响应式设计和“Media Queries”技术。

        其次是全屏浏览。因为移动设备通常屏幕较小，所以浏览器的地址栏和移动系统上的状态栏会占用较为可观的可视区域，因此Safari提供了一些设置来解决这个问题，就是使用全屏浏览模式，代码如下。

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black- translucent">

        不过目前仅有iOS系统上的Safari浏览器提供类似的支持，还有一种并不完美的方式，但可能较为通用，代码如下。

    window.addEventListener('load', function(e) {
        setTimeout(function() { window.scrollTo(0, 1); }, 1);
      }, false);

        最后是图标的设置。为了让网页在移动设备中也能像其他应用（这个会在第15章详细介绍）一样，可以设置该网页的图标，使用的方法是使用“link”标签设置，在Android浏览器中的方式是使用如下属性，与Safari中的设置类似。

    <link rel="apple-touch-icon-precomposed" href="/path/to/icon/image" />

        上面的这些设置，在WebKit中的实现其实并不是特别困难，而且这些功能的引入对移动设备特别有用，现在已经被较为广泛地使用。

        响应式设计现在已经被炒得非常热了，其基本思想是根据不同分辨率或者说不同大小的屏幕，设计不同的布局，那么浏览器虽然知道当前的分辨率和屏幕大小，可如何将开发者为该屏幕设计的网页布局应用在当前网页的渲染中呢？这就用到CSS规范中的“Media Queries”技术。

        关于“media”在第6章中做过一些介绍，如它能够区分CSS应用在屏幕或者打印等不同场景，但是这只是其中的一个设置，而且是比较简单的。

    @media (min-width: 1280px) and (min-height: 720px) and (orientation: landscape) {
        body { … }
        div { … }
    }

        这段代码表示定义在该media之下的规则应用在分辨率大于1280*720的设备上，并且是横屏模式，因为屏幕大小有了明显的限制，做出合适的网页布局就变得容易了。