视口
-
PC端：视口指浏览器可视化区域，宽度和浏览器窗口的宽度一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。
-
移动端：涉及三个视口，布局视口（layout viewport）、视觉视口（visual viewport）和理想视口（ideal viewport）。
布局视口layout viewport
小屏幕的移动端设备，主要是手机和部分平板（屏幕特别巨大的除外＝ ＝ ），如果让视口的宽度和浏览器宽度 保持一致的话，会导致一个结果——-页面很丑。
手机，平板，浏览器的宽度一般在240-640像素之间，而大…大多数给pc设计的宽度至少为800，一般是960，或者1080。因此，如果用手机去看刚才的那个页面，宽度20%的aside将会非常窄。
一个为桌面设计的网站 在780～ 1260px 的视口中应该会显示的很好，20% 宽度的元素也会大致像设计师希望的那样。
但是，如果移动端浏览器遇到了没有为移动端做优化的网站，它会尽可能的缩小网站让用户看到网站的全貌。所以就显得很挤，字体很小，阅读性很差。这样用户就只有通过放大，去看想看的信息。
所以呢，手机厂商为了解决这个问题，设置了一个layout viewport。这是一个虚拟的窗口，其大小比手机屏幕大，加载网页时，直接把HTML渲染在这个虚拟的窗口中，这样就不会样式错乱了。在查看的时候，毕竟手机的visual viewport小啊，那就只能通过滚动条来看了。
做个比喻，layout viewport就是一张大白纸，HTML的内容就写在这个大白纸上，visual viewport就是一个放大镜，上下左右移动，可以显示其中的一部分。
layout viewport的大小获取：
document.documentElement.clientWidth
document.document.clientHeight
视觉视口visual viewport
视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口。
用来显示网页内容的区域，可以通过下面的js命令获取：
window.innerWidth
window.innerHeight
前端里面能获取到的像素基本上都是CSS像素，所以这个的单位也是CSS像素。对于iPhone X，浏览器全屏状态下，其window.innerWidth的值为375。
screen.width和screen.height，主要是用来获取整个屏幕的大小的，而window.innerWidth和window.innerHeight只是获取浏览器可用显示区域的大小，也就是浏览器中间负责显示的部分。当浏览器全屏时，要去掉状态栏、标签栏、任务栏等区域，当浏览器非全屏时，其值更小。由于在移动端，浏览器一般都是全屏的，所以大多数情况下screen.width与window.innerWidth的值相等，也有的博客中说用screen.width和screen.height来获取visual viewport的大小，就是这个原因。
visual viewport是我们可以直观看到的，不严谨的说，就是差不多等于手机屏幕的大小，偏向于一个物理概念。
理想视口ideal viewport
Layout viewport是为了能将电脑上的网页正确的显示到手机上。当浏览器拿到一个网页时，首先会渲染到这个layout viewport里面。
可是现在有很多网页会针对手机做专门的设计，比如现在的一些H5活动页，设计的尺寸就是在手机上看的。此时如果还是把网页渲染到这个大的layout viewport上，实在是有点不合适了。
所以，还应该有个ideal viewport，这个ideal viewport应该与手机屏幕大小的相同，确切来说，等于visual viewport的大小。把页面渲染到这个ideal viewport里面，就能在visual viewport中完美显示。
用下面的方法可以使布局视口与理想视口的宽度一致:
//理想视口=布局视口=逻辑像素值
<meta name="viewport" content="width=device-width">
实际上，这就是响应式布局的基础。
视口的设置
我们可以使用视口元标签（viewport meta 标签）来进行布局视口的设置。
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1">
| 属性名 | 取值 | 描述 |
|---|---|---|
| width | device-width或正整数 | 定义视口的宽度，单位为像素，一般为device-width：表示宽度为设备屏幕的宽度 |
| height | device-width或正整数 | 定义视口的高度，单位为像素，一般不用写 |
| initial-scale | [0.0-10.0] | 定义初始缩放值，一般设置为1.0 |
| minimum-scale | [0.0-10.0] | 定义缩小最小比例，它必须小于或等于maximum-scale设置 |
| maximum-scale | [0.0-10.0] | 定义放大最大比例，它必须大于或等于minimum-scale设置 |
| user-scalable | yes / no | 定义是否允许用户手动缩放页面，默认值 yes |
有几点值得注意：
- viewport 标签只对移动端浏览器有效，对 PC 端浏览器是无效的
- 当缩放比例为 100% 时，逻辑像素 = CSS 像素宽度 = 理想视口的宽度 = 布局视口的宽度
- 单独设置 initial-scale 或 width 都会有兼容性问题，所以设置布局视口为理想视口的最佳方法是同时设置这两个属性
- 即使设置了 user-scalable = no，在 Android Chrome 浏览器中也可以强制启用手动缩放
小结
layout viewport和ideal viewport都是用来渲染页面，layout viewport较大，用来渲染电脑上的页面，ideal viewport较小，用来渲染专门针对手机设计的页面；而visual viewport是用来查看layout viewport和ideal viewport的，是用来查看渲染的结果的。visual viewport是很具体的，而layout viewport和ideal viewport是比较抽象的。某种程度来说，layout viewport和ideal viewport可以理解成是两种尺寸，承载页面渲染的盒子，可以设置成layout viewport的尺寸，也可以设置成ideal viewport的尺寸，而且在默认情况下是layout viewport的尺寸。如果我们设置HTML中body为width:100%，那么这个body的实际宽度，将由这个盒子的宽度决定。
网友评论