移动开发viewport

三种 viewport

• layout viewport：文档流的 css 宽度，是一个静态的值，使用 document.documentElement.clientWidth 获取，在meta中是 width 设置的值
• visual viewport：当前可视区的显示的 css 宽度，为文档流现在在屏幕可视区显示出来的宽度，可以使用 window.innerWidth 来获取
• ideal viewport：移动设备的理想viewport，不同的设备拥有有不同的ideal viewport。所有的iphone的ideal viewport宽度都是320px，无论它的屏幕宽度是320还是640，也就是说，在iphone中，css中的320px就代表iphone屏幕的宽度。

使用 meta 标签对 viewport 进行设置

当 meta 标签的 name 值为 viewport 时 content 里面的值可以对 viewport 进行控制

<meta name="viewport" content="...">

content 的属性值

• width：设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
• initial-scale：设置页面的初始缩放值，为一个数字，可以带小数
• minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数
• maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数
• height：设置layout viewport 的高度，这个属性对我们并不重要，很少使用
• user-scalable：是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

content 设置多个属性时候，使用“,”隔开

所以我们常见移动端开发的 meta 为：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

把当前的 viewport 宽度设置为 ideal viewport 的宽度

第一中方法：

<meta name="viewport" content="width=device-width">

可以看到通过 width=device-width ，所有浏览器都能把当前的 viewport 宽度变成 ideal viewport 的宽度，但要注意的是，在 iphone 和 ipad 上，无论是竖屏还是横屏，宽度都是竖屏时 ideal viewport 的宽度

第二种方法：

<meta name="viewport" content="initial-scale=1.0">

这句代码也能达到和前一句代码一样的效果，也可以把当前的的viewport变为 ideal viewport。

呵呵，傻眼了吧，因为从理论上来讲，这句代码的作用只是不对当前的页面进行缩放，也就是页面本该是多大就是多大。那为什么会有 width=device-width 的效果呢？

要想清楚这件事情，首先你得弄明白这个缩放是相对于什么来缩放的，因为这里的缩放值是1，也就是没缩放，但却达到了 ideal viewport 的效果，所以，那答案就只有一个了，缩放是相对于 ideal viewport来进行缩放的，当对ideal viewport进行100%的缩放，也就是缩放值为1的时候，不就得到了 ideal viewport吗？事实证明，的确是这样的。

但是在 IE 上支持有是横竖屏都等于 ideal viewport 的宽度，所以为了全部都无问题，则设置

综合后的办法

<meta name="viewport" content="width=device-width,initial=scale=1.0">