引言
先在此感谢ppk大神分享的viewport系列文章，经过反复的阅读，加深了对viewport的理解 （十分建议多阅读几遍）
meta标签的总结
-
视觉视口宽度 = 理想视口宽度 / initial-scale（缩放比例）
将viewport划分为visual viewport、ideal viewport、layout viewport的目的是为了样式能更好在移动端进行相应的布局
-
完全缩小模式：指meta标签没有设置initial-scale，浏览器会将视觉视口设置为新的布局视口大小
个人理解：是因为浏览器厂商为了使PC端设计网页在移动端显示时不出现横向滚动条，而设置的一个默认操作
graph TD
仅设置width=newWidth,即将布局视口宽度设置为newWidth --> 没有设置initial-scale
--> 浏览器将视觉视口设置为新布局视口大小,即完全缩小模式
仅设置initial-scale=n --> 根据视觉视口宽度计算公式,计算出视觉视口宽度 --> 浏览器会将布局视口宽度设置为刚刚计算出的视觉视口宽度
- 由上面两图可以知道，其实width，initial-scale具有很相似的功能（最终均可以设置布局视口的宽度）
- 但经常可以看到initial-scale和width属性同时设置，这是为什么呢？
<meta name="viewports" content="width=device-width,initial-scale=1"/>
graph TD
当设置width=device-width时,在iPhone和iPad下,无论`横屏还是竖屏布局视口宽度`均为`竖屏下理想视口的宽度`
--> 同理设置initial-scale=1时,在IE下,无论`横屏还是竖屏布局视口宽度`均为`竖屏下理想视口的宽度`
- 因此单独设置width=device-width或initial-scale=1时，在iPhone、iPad或IE中，均会出现无论横屏还是竖 屏布局视口宽度均为竖屏下理想视口的宽度。因此当两个属性同时写上去的时候，width=device-width解决了 IE产生的问题，initial-scale=1解决了iPhone和iPad产生的问题 （说白了，就是不同浏览器的兼容性造成的）
而这会导致在横屏下，视觉视口的宽度大于布局视口宽度
1. 违背视觉视口不能大于布局视口的定义（`当视觉视口===布局视口时，会发现无法缩小，因此有了此定义`）
2. 个人猜测：当视觉视口大于布局视口时，那么在布局视口的右边就会有一片空白的区域
a. 在PC端上又将视口划分为布局视口，视觉视口，理想视口的概念，因此这条路测不通
b. 在浏览器上通过Toggle device toolbar，测试了iPhone和iPad，发现并不会，
仅设置width=device-width时，并不会出现这样的情况，
难道说现在这两兄弟已经解决了这个问题（毕竟ppk大神这一系列文章好像是12年的）？
c. 因此我还是不能理解为何这两个属性需要一起写，难道说是为了低版本IE
（(⊙﹏⊙)感觉不至于吧，脑壳痛），然后又不知道如何进行移动端IE的测量
因此我偏向于是为了解决不同浏览器的兼容性，才会同时写上这两个属性，防止出现上面流程图中出现的现象
- 既然最终都可以设置布局视口的宽度，那么当同时设置这两个属性时，浏览器究竟会应用谁呢？
- 其实这很简单，仅仅需要设置width=400 、initial-scale=1。然后在iPhone4（320px * 480px），分别在横屏和竖屏下，通过document.documentElement.clientWidth获取布局视口宽度，就可以知道了
inital-scale=1：通过视觉视口的计算公式，得出新的视觉视口宽度，然后将布局视口宽度设置为新的视觉视口宽度
width=400：将布局视口宽度设置为400px，然后浏览器通过完全缩小模式，将视觉视口设置为布局视口的大小
-
竖屏：理想视口的宽度为320px，initial-scale=1最终会将布局视口宽度设置为320px；而width=400，会将布局视口的宽度设置为400px。而最终起作用的是width=400，将其设置为400px
-
横屏：理想视口的宽度为480px，initial-scale=1最终会将布局视口宽度设置为480px；而width=400，会将布局视口的宽度设置为400px。而最终起作用的是initial-scale=1将其设置为480px
- 综上，当同时设置产生冲突，浏览器会应用能将
布局视口宽度设置的比较大的属性！
- 综上，当同时设置产生冲突，浏览器会应用能将
