深刻理解viewport及相关属性的关系

标题想了半天，最后潦草的取了【深刻理解*】，可能有些童鞋们看完以为没有深刻理解，那。。。

话很少说，上正题，本文主要是加深对viewport3个视口的了解，以及相关的属性做用于哪些视口上，但愿对你们有帮助吧

归纳总结：布局视口最有用，用到的几乎都是这个。理想视口是浏览器定义的最佳的布局视口的尺寸，缩放的最大最小状况是基于这个计算的。视觉视口受缩放影响，通常状况不大用。

大概了解viewport童鞋们应该知道，viewport有3种

1. 布局视口（layout viewport）
2. 视觉视口（visual viewport）
3. 理想视口（ideal viewport）

对应相关的属性有5个

1. width：设置布局视口的宽度为特定的值
2. initial-scale：设置页面的初始缩放程度和布局视口的宽度。
3. minimum-scale：设置最小缩放程度(范围0.1 - 10)
4. maximum-scale：设置最大缩放程度(范围0.1 - 10)
5. user-scalable：是否阻止用户进行缩放

为啥没有理想窗口：由于理想窗口是浏览器本身定义的，不一样浏览器设备的理想窗口不一致是很正常的。

布局视口

移动设备的一般的宽度在240到640像素之间，可是不少桌面的网站的宽度都在800像素以上。一个35%的sidbar在桌面看起来很正常，在手机上则会很是的窄。为了解决这个问题。不少移动端浏览器的厂商都将视口的宽度设计的比屏幕尺寸宽不少，从768到1024不等，但常见的宽度是980px。

能够用document.documentElement.clientWidth/clientHeight取得对应的值

下图是在没有加viewport meta的时候，对应移动端的宽度(iphone 8p上也是980)

在浏览器碰到一个没有作移动端优化的网站时候，浏览器会尽量缩小网站让用户看到网站的全貌。

viewport meta里面的width是用来设置layout viewport的，除了常见的device-width，还能设置成固定数值，好比600。

CSS布局会根据布局视口计算，并被它约束。

以下图，粉色条的宽度是根据600 * 30% = 180

initial-scale也是用来设置layout viewport的，它和minimum-scale和 maximum-scale不同。

布局视口宽度 = 理想视口宽度 / initial-scale， 因此下图中布局视口的宽度等于106

视觉视口

视觉视口是指用户正在看到的网站的区域。用户能够经过缩放来操做视觉视口，同时不会影响布局窗口

通常状况下，视觉视口对开发人员并不重要，可是若是实在要用，能够用window.innerWidth/Height能够获取当前视觉适口的值（安卓webkit2和代理浏览器会有问题）

理想视口

在讲布局视口的时候，提到过布局视口的默认宽度通常是980左右，以适应桌面网页的宽度，但这在移动端并非一个理想的宽度，因此浏览器厂商都引入了理想视口的概念。

理想视口对设备来讲是最理想的布局视口尺寸，拥有最理想的浏览和阅读的宽度。

理想视口是浏览器定义的，不是设备或操做系统的工做。因此同一个设备上的不一样浏览器可能具备不一样的理想适口宽度。

理想视口宽度会随着设备改变转向 (早期的safari例外，能够用initial-scale=1解决，我刚刚用iphone 8p试了，旋转设备后理想适口自动换了）

能够用screen.width/height 返回理想视口的尺寸。（兼容性很差。。。）

如下两种方式都能将布局窗口的宽度设置成理想窗口的宽度，可是第一种方式在早期safari的设备旋转后不会变化，第二个在IE 10下宽度不正确，因此第三种才是完美的mata视口

<meta name="viewport" content="width=device-width">

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

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

全部的缩放都是基于理想视口宽度的 maximum-scale和minimum-scale都是根据理想视口定的，和布局视口的宽度并没有关系。

下图中，理想视口宽度是320px，布局视口设置成160px，截图是我放大到最大的时候（10倍），对应视觉窗口的宽度是32px(2个粉红的宽度)，即 理想视口宽度/10倍的宽度，而不是布局视口/10的宽度（16px）

参考：
书本《移动web手册》
连接：https://www.quirksmode.org/mo...