标题想了半天，最后带着【深入理解*】潦草写下，可能有的童鞋看了觉得理解不深。..话不多说，进入正题。这篇文章主要是加深对viewport的3个viewport的理解，相关属性作用于哪些viewport。希望对大家有所帮助。总结：布局视口是用的最多的，几乎都会用到。它是这个。理想视口是浏览器定义的最佳布局视口的大小，最大和最小缩放条件均以此计算。视觉视口受缩放影响，通常没有用。关于视口的童鞋应该都知道，视口有3种布局视口，视觉视口，理想视口。对应的属性有5个widths：设置布局视口的宽度为特定值initial-scale的值：设置页面的初始缩放级别和布局视口的宽度。minimum-scale：设置最小缩放级别（范围0.1-10）maximum-scale：设置最大缩放级别（范围0.1-10）user-scalable：是否阻止用户缩放为什么没有理想窗口：因为理想window是浏览器本身不同的浏览器设备，理想的窗口定义不一致是正常的。布局视口在移动设备上的宽度通常为240到640像素，但许多桌面站点的宽度为800像素或更多。35%的sidbar在桌面上看起来很正常，但在手机上却很窄。解决这个问题。许多手机浏览器厂商将视口的宽度设计得比屏幕尺寸宽很多，从768到1024不等，但常见的宽度是980px。您可以使用document.documentElement.clientWidth/clientHeight来获取相应的值。下图是未添加viewportmeta时对应手机端（iphone8p也是980）的宽度。当浏览器遇到没有针对移动端优化过的网站时，浏览器会尽可能地缩小网站，让用户看到网站的全貌。视口元中的宽度用于设置布局视口。除了常见的device-width，还可以设置为固定值，比如600。CSS布局是根据layoutviewport计算并受其约束的。如下图，粉条的宽度是根据600*30%=180。initial-scale也是用来设置布局视口的，区别于minimum-scale和maximum-scale。布局视口宽度=理想视口宽度/initial-scale，所以下图中布局视口的宽度等于106视觉视口视觉视口指的是用户所看到的网站区域。用户可以在不影响布局窗口的情况下，通过缩放操作可视视口。一般来说，视觉视口对开发者来说并不重要，但如果真的有必要，可以通过window.innerWidth/Height来获取当前视觉上的赏心悦目值（Androidwebkit2和proxy浏览器会有问题）说到布局视口，理想视口提到布局视口的默认宽度一般在980左右，以适应桌面网页的宽度，但在移动端却不是这样。一个理想的宽度，所以浏览器厂商引入了理想视口的概念。理想视口是设备最理想的布局视口大小，具有最理想的浏览和阅读宽度。理想的视口是由浏览器定义的，而不是设备或操作系统的工作。因此，同一设备上的不同浏览器可能具有不同的理想适合宽度。idealviewportwidth会随着设备方向的改变而改变（除了早期的safari，可以通过initial-scale=1来解决，我刚用iphone8p试了一下，设备旋转后idealviewport会自动改变）。您可以使用screen.width/height返回Theidealviewportsize。（兼容性不好。。。）下面两种方法可以将布局窗口的宽度设置为理想窗口的宽度，但是第一种方法在早期的safari设备旋转后不会改变，第二种方法在下不会改变IE10宽度不对，所以第三个是完美的mataviewport
