（一）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;
}
})();