<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=0.5：表示最小的缩放比例
maximum-scale=2.0：表示最大的缩放比例
user-scalable=yes：表示用户是否可以调整缩放比例
如果是想要一打开网页，自动以原始比例显示，并且不允许用户修改的话，则是：
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
ps：将比例都改为1,即可。
一。分类（三种）
layout viewport ：那些为桌面设计的网站也能在移动浏览器上正常显示的宽度（这是浏览器的一个默认值）
visual viewport ：浏览器可视区域的大小
ideal viewport：能完美适配移动设备的viewport。即不需要用户缩放和横向滚动条就能正常的查看网站的所有内容，显示的文字的大小是合适的。
PC页面在手机缩放原因：
1. iphon4默认的viewport 980px , user-scalable=yes
2.那么initial-scale 在320px的浏览器上 就是320/980 即0.33333
<meta name="viewport" content="width=device-width,meta标签作用：让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。
meta viewport 中的content有6个属性,如下：
PS：多个属性同时使用时用逗号隔开。
三。得到ideal viewport——>默认的 layout viewport的宽度 = 移动设备的屏幕宽度
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1">
上面两句代码的功能一样，都可以可以把当前的的viewport变为 ideal viewport。
**PS：深入理解缩放 ： 缩放是相对于 ideal viewport来进行缩放的 。因此缩放值为1的时候，就得到了 ideal viewport 。
缩放值越大，当前viewport的宽度就会越小。
当前缩放值 = ideal viewport宽度 / visual viewport宽度 （安卓上的原生浏览器以及IE有些问题）
**PS：width 和 initial-scale=1 同时出现，且出现了冲突时，浏览器会取它们两个中较大的那个值。但是事情并不都是完美的，总有个别奇葩的出现，比如uc9。在uc9浏览器中，当initial-scale=1时，无论width属性的值为多少，此时viewport的宽度永远都是ideal viewport的宽度。
总结 ： 把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。
最完美的写法应该是
<meta name="viewport" content="width=device-width, initial-scale=1">
initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病。
一个标准的移动web页面 如下：
<meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=0">
四。有一个小小的注意点：
在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。
五。动态改变meta viewport标签（两种办法）
1.使用 document.write 来动态输出 meta viewport
document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')
2.通过 setAttribute 来改变
<meta id="testViewport" name="viewport" content="width = 380">
<script>
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
</script>
注意：在这里还是有一个奇葩的出现，安卓2.3。安卓2.3自带浏览器上的一个 bug，对 meta viewport 标签进行覆盖或更改，会出现一个迷之结果，无法预测。
---------------------
作者：ferrysoul
来源：CSDN
原文：https://blog.csdn.net/ferrysoul/article/details/81231199
版权声明：本文为博主原创文章，转载请附上博文链接！