（一）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 viewportppk把这个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; }})();