2.4 阻止移动浏览器自动调整页面大小
iOS和Android浏览器都基于WebKit（http://www.webkit.org/）核心。这两种浏览器以及很多其他浏览器（如Opera Mobile），都支持用viewport meta元素覆盖默认的画布缩放设置。只需要在HTML的<head>标签中插入一个<meta>标签。<meta>标签中可以设置具体的宽度（如像素值）或者缩放比例如2.0（设备实际尺寸的两倍）。下面是一个将页面放大到设备实际尺寸两倍显示的meta标签的示例：
将这个''标签插入到我们的HTML中，如下面的代码所示：
然后，在Android中加载该页面，显示效果如下所示：
如你所见，这并不是我们最终想要的效果，但这个夸张的效果说明了我们讨论的问题。
安装iOS模拟器和Android模拟器
虽然真机测试无可替代，但还是可以使用Android和iOS模拟器。Windows、Linux和Mac版的Android模拟器都可以免费下载，Android软件开发工具包（SDK）也可以免费安装。下载地址是http://developer.android.com/sdk/。不过得使用命令行安装，需要你有一颗勇敢的心(1)。iOS模拟器是Xcode开发包（在Mac App Store中免费下载）的一部分，只能在Mac OS X上使用。一旦安装了Xcode，你就可以在这个路径下找到模拟器：～/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications iOS Simulator.app
我们来分析一下上面所示的<meta>标签，以理解它的工作原理。name＝"viewport"属性不言而喻。content＝"initial-scale＝2.0的意思是将页面放大两倍（同理，0.5表示缩小一半，3.0表示放大3倍），同时width＝device-width告诉浏览器页面的宽度应该等于设备宽度。
<meta>标签还可以控制页面可缩放的范围。下面的代码允许用户将页面最多放大至设备宽度的3倍，最小压缩至设备宽度的一半。
你还可以禁止用户缩放，不过缩放是一个重要的辅助功能，所以在实践中很少禁用。
user-scalable＝no即是禁止缩放。
现在，我们将缩放比例设置为1.0，这表示浏览器将按照其视口的实际大小来渲染页面。将宽度设置为设备宽度，意味着支持该特性的浏览器都将会按照设备宽度的实际大小来渲染页面。下面是我们最终将要使用的<meta>标签：
在竖直的iPad上浏览页面，可以看到还是有一部分内容被剪切掉了，但已经不再是缩小版的页面了！这就是本节想要达到的目的。相信我，这是个进步！
鉴于viewport meta标签的使用越来越普遍，W3C正尝试通过CSS引入同样的功能。可以访问http://dev.w3.org/csswg/css-device-adapt/，了解新的@viewport声明。基本思路是不用在<head>标签中添加<meta>标签了，而是可以在CSS中编写@viewport { width： 320px； }声明，同样可以将浏览器视口宽度设置为320像素。有些浏览器已经支持这种语法（如Opera Mobile），不过要使用私有前缀，如@-o-viewport{ width： 320px； }。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论