移动开发viewport

三种 viewport 使用 meta 标签对 viewport 进行设置

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

<meta name="viewport" content="..."> content 的属性值

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">

posted @