viewport 学习

（一）viewport概念

（1）viewport写法
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" http-equiv="Content-Type" charset="utf-8"/>

（2）layout viewport
ppk认为浏览器默认的viewport叫做 layout viewport。
这个layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取。

（3）layout viewport

layout viewport的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表 浏览器可视区域的大小，
ppk把这个viewport叫做 visual viewport。
visual viewport的宽度可以通过window.innerWidth 来获取，但在Android 2, Oprea mini 和 UC 8中无法正确获取。

（4）ideal viewport

ppk把这个viewport叫做 ideal viewport，也就是第三个viewport——移动设备的理想viewport。

（5）利用meta标签对viewport进行控制

在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：

　　width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
　　initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
　　minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
　　maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
　　height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
　　user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。

（6）把当前的viewport宽度设置为 ideal viewport 的宽度

要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。
因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了。

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

（7）关于缩放问题
visual viewport宽度 = ideal viewport宽度 / 当前缩放值

当前缩放值 = ideal viewport宽度 / visual viewport宽度
ps: visual viewport的宽度指的是浏览器可视区域的宽度。

 

（二）动态改变meta viewport标签

第一种方法

可以使用document.write来动态输出meta viewport标签，例如：
document.write('<meta name="viewport" content="width=device-width,initial-scale=1">');

第二种方法

通过setAttribute来改变

<meta id="testViewport" name="viewport" content="width = 380">
<script>
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
</script>

这里证明，html任何一个标签都能使用id作为选择器。

安卓2.3自带浏览器上的一个bug

复制代码
<meta name="viewport" content="width=device-width">

<script type="text/javascript">
alert(document.documentElement.clientWidth); //弹出600，正常情况应该弹出320
</script>

<meta name="viewport" content="width=600">

<script type="text/javascript">
alert(document.documentElement.clientWidth); //弹出320，正常情况应该弹出600
</script>
复制代码
测试的手机ideal viewport 宽度为320px，第一次弹出的值是600,但这个值应该是第行meta标签的结果啊，
然后第二次弹出的值是320，这才是第一行meta标签所达到的效果啊，所以在安卓2.3(或许是所有2.x版本中)的自带浏览器中，
对meta viewport标签进行覆盖或更改，会出现让人非常迷糊的结果

原文:http://www.cnblogs.com/2050/p/3877280.html

 

附一段 viewport 初始化代码

(function () {

    var win = window,
        doc = win.document,
        docEl = doc.documentElement,
        ua = win.navigator.userAgent,
        metaA = docEl.querySelector('meta[name="viewport"]'),
        isIOS = ua.match(/iphone/gi),
        scale, dpr;

    if (isIOS) {

        dpr = win.devicePixelRatio;
        dpr = dpr >= 3 ? 3 : dpr >= 2 ? 2 : 1;
        scale = (1 / dpr).toFixed(2);

        docEl.setAttribute('data-dpr', dpr);
        docEl.setAttribute('ios', 'true');

        if (!metaA) {
            metaA = doc.createElement('meta');
        }

        metaA.setAttribute('name', 'viewport');
        metaA.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

        if (!metaA) {
            if (docEl.firstElementChild) {
                docEl.firstElementChild.appendChild(metaA);
            } else {
                var div = doc.createElement("div");
                div.appendChild(metaA);
                doc.write(div.innerHTML);
            }
        }

        win.dpr = dpr;
    }
})();