viewport 的基本原理以及详细使用方法

maximum-scale允许用户的最大缩放值，为一个数字，可以带小数minimum-scale允许用户的最小缩放值，为一个数字，可以带小数user-scalable是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许

viewport进阶

1.width和initial-scale
当设置了width和initial-scale时，浏览器会自动选择数值最大的进行适配。如设置：

<meta name="viewport" content="width=400, initial-scale=1">

浏览器会选择数值大的进行适配，如果当前窗口ideal viewport宽度为300，initial-scale值为1，取得是width为400的值；如果当前窗口的ideal viewport为480，则取480。

事实上，width=device-width和initial-scale=1都代表应用ideal viewport，但在ipad、iphone等移动设备和IE上，横竖屏不分，默认都取竖屏的宽度，兼容性最好的写法就是

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

2.动态改变属性

a. document.write()

document.write(‘<meta name="viewport" content="width=device-width,initial-scale=1">’)

b.setAttribute

var mvp = document.getElementById(‘testViewport’);
mvp.setAttribute(‘content’,’width=480′);

好了，这篇文章就介绍到这了大家可以根据自己测需要要选择。一般来说pc与移动不带自适应的就可以用不支持缩放的，如果跳转到移动端的可以缩放也没有影响。