meta 之 viewport—手机上影响网页查看方式的神奇的“显示器”

在 让WebApp在iOS上模拟NativeApp的效果 中提到了对页面进行一些 meta 标记的添加，实现类似 Native App 的表现，不过这种表现只是外在的，接下来看看页面内容的显示问题。

我们已知 viewport 在手机网页中有重要作用，但它具体起了哪些作用？

viewport其事

viewport 直译为“视口”，它的作用可以这么想象：如同玩一个3D游戏，你能通过显示器看到3D场景，但一般场景大小远大于显示器屏幕大小，你需要移动和缩放场景之后，才能看到全部的场景。如果你用CSS写过3D的动画效果，联想一下 -webkit-perspective 属性:D

对，它就是手机上影响网页查看方式的神奇的“显示器”。它的尺寸决定你能看到的页面的尺寸，然后将 viewport 通过屏幕展示，你就可以看到页面内容了。

一般的桌面端网页都不会添加 viewport 设置，用智能手机查看这些页面时，是在设备的默认 viewport 设置下显示的。不同 浏览器的默认 viewport 并不一致，比如 Apple Safari 默认是 980px，Android Webkit 默认是 800px，Windows Phone IE 默认是1024px，而桌面端页面最小宽度大概在800px左右。

meta 之 viewport

1<metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

1、width : 控制viewport的大小，可以指定一个值，如600， 或者特殊的值，如device-width为设备的宽度（单位为缩放为100%的CSS的像素）

2、height :和width相对应，指定高度

3、initial-scale : 初始缩放比例，页面第一次加载时的缩放比例

4、maximum-scale : 允许用户缩放到的最大比例，范围从0到10.0

5、minimum-scale : 允许用户缩放到的最小比例，范围从0到10.0

6、user-scalable : 用户是否可以手动缩放，值可以是：①yes、 true允许用户缩放；②no、false不允许用户缩放