做Web开发时，通常我们要在head部分设置viewport样式，通常代码为：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
如果不了解viewport的原理，在兼容各种屏幕时就会出现各种样式上的问题
viewport的分类
在了解viewport中各的种属性的含义前，需要先区分一下viewport的种类
layout viewport
这是浏览器绘制我们Web网页的区域，也可以说是浏览器的画布。如下图所示，黑色箭头所指的部分就是layout viewport的区域
visual viewport
这是通过屏幕能够看到的区域。如下图所示，黑色箭头所指的屏幕上的部分就是visual viewport的区域。visual viewport区域是layout viewport中可以通过屏幕展示的那一部分
如何测量viewport
有时候我们需要知道这两种viewport大小分别是多少的时候，如何获取这些数据呢？
获取layout viewport大小
window.innerWidth
- 这一个只读属性，返回以像素为单位的窗口的内部宽度
- 如果存在垂直滚动条，则也会包含垂直滚动条的宽度
document.documentElement.clientWidth
- clientWidth属性返回一个元素的内部宽度，不包括边框、外边距和垂直滚动条
- documentElement表示稳定对象的根元素，也就是Web页面中html元素
- 当作用在根元素上时，clientWidth返回的是viewport的宽度，但是不包括垂直滚动条的宽度
获取visual viewport大小
window.visualViewport
这是一个实验中的功能返回一个VisualViewport的对象，表示给定窗口的visual viewport，通过该对象可以获取到visual viewport的大小。以下是在Chrome中VisualViewport的相关属性:
设置viewport时，是在改变什么
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
当我们在Web页面中添加上述标签时，起到的作用可以从以下几个方面进行分析
width的大小影响什么
width的大小直接影响layout viewport的大小，一般来说该width的值等于layout viewport的宽度值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=750, initial-scale=1.0">
<title>viewport</title>
</head>
<body>
<div>
<span>左边部分</span>
<span style="margin-left: 250px; margin-right: 250px;">中间部分</span>
<span>右边部分</span>
</div>
</body>
</html>
当我们在Chrome中打开上述页面，并切换到移动显示时，可以在Console中打印document.documentElement.clientWidth的值，该值为我们在viewport中设置的750。
*-scale缩放比例是指什么
layout viewport设定之后，不会随着用户的缩放操作而改变。这样也保证了页面上各个元素相对位置的一个稳定性，因为layout viewport是浏览器绘制Web页面的画布。
用户缩放操作可以影响其看到的内容，所以缩放操作直接影响了viewport的大小。在window.visualViewport对象上有scale和width两个属性，这两个属性的乘积等于window.screen.width。
- 当我们放大页面时，visual viewport就会变小，这个时候能看到的layout viewport部分就会变小
- 当我们缩小页面时，visual viewport就会变得，这个时候能看到的layout viewport部分就会变大
通过设置这个比例，我们可以限制用户对页面的缩放程度。
user-scalable控制什么
user-scalable控制用户对于Web页面是否可以进行缩放操作。
所以当我们设置viewport时，是在设置layout viewport的大小，同时设置页面缩放相关的属性。
@media是基于哪个viewport
在响应式Web设计中，我们通常会用到@Media来进行不同的媒体设置样式设置。例如：
@media screen and (max-width: 375px) {
.left {
color: red;
}
}
这段代码中，width的比较基准是哪个viewport的宽度呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=750, initial-scale=1.0">
<title>viewport</title>
<style>
@media screen and (max-width: 375px) {
.left {
color: red;
}
}
</style>
</head>
<body>
<div>
<span class="left">左边部分</span>
<span style="margin-left: 250px; margin-right: 250px;">中间部分</span>
<span>右边部分</span>
</div>
</body>
</html>
可以修改上面代码中viewport的width的值，然后观察效果。width的比较基准是layout viewport的宽度。
总结
通过上述对两种viewport的介绍、viewport标签参数的作用以及@media媒体查询中宽度的基准量进行介绍和相关代码，基本上涵盖了viewport的方方面面，在日常开发中我们再也不用害怕viewport设置了
