一、前言
移动互联网的快速发展，让人们已经已经越来越习惯于使用手机完成大部分日常的事务。因为目前移动端的设备型号较多，所以我们需要对其进行一些适配。
移动端开发分类
- 原生App开发（ios、Android、RN、uniapp、Flutter等）；
- 小程序开发（原生小程序、uniapp、Taro等）；
- Web页面（移动端的Web页面，可以使用浏览器或者webview浏览）。
二、自适应与响应式
- 自适应：根据不同的设备屏幕大小来自动调整尺寸、大小；
- 响应式：会随着屏幕的实时变动而自动调整，是一种自适应。
三、认识视口（viewport）
1、在一个浏览器中，我们可以看到的区域就是视口（viewport）；
2、 在pc端的页面中，布局视口等于视觉视口；
3、 但是在移动端，布局视口和视觉视口是有区别的：
- 由于移动端的网页窗口比较小，有时候我们需要一个大的网页在移动端可以完整的显示；
- 所以在默认情况下，移动端的布局视口是大于视觉视口的。
在移动端，我们可以将视口划分为三种情况：
- 布局视口（layout viewport）
- 视觉视口（visual viewport）
- 理想视口（ideal viewport）
四、布局视口
1、默认情况下，一个在PC端的网页在移动端会如何进行显示？
- 它会按照宽度为980ox来布局一个页面的盒子何内容；
- 为了网页可以完整的显示在页面中，会对整个页面进行缩小。
2、我们相对于980px布局的这个视口，我们称之为布局视口（layout viewport）
- 布局视口的默认宽度是980px
3、设置布局视口宽度
在自动生成的html的文件中，我们总是会看到这么一行代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这行代码其实就是针对移动端布局视口的适配，content中的width代表的其实就是布局视口宽度，而device-width代表的是设备宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 将布局视口设置为2000px -->
<meta name="viewport" content="width=2000">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
五、视觉视口
在默认情况下，我们按照980px显示内容，那么网页的右侧又一部分区域可能会无法显示，所以移动端浏览器默认会对页面进行缩放，使网页能完整的显示到可见区域。
这个可见区域的视口，就是视觉视口（visual viewport）
六、理想视口
1、如果所有网页都按照980px在移动端布局，那么最终页面都会被缩放显示
- 事实上这种方式是不利于我们进行移动端的开发的，更多的时候我们希望设置的宽度和显示的宽度保持一致;
- 这种布局视口等于视觉视口的情况，就称为理想视口（ideal viewport）。
2、理想视口（ideal viewport）：
- 默认情况下的布局视口（980px）并不适合我们进行布局；
- 我们可以对布局视口进行宽度和缩放的设置，以满足正常在一个移动端的布局；
- 这个时候可以设置meta中的viewport。
3、viewport的content属性的配置
| 属性名 | 属性值 | 描述 |
|---|---|---|
| width | 正整数/device-width, 默认为980 | viewport的宽度 |
| height | 正整数/device-height | viewport的高度，一般不会设置这个属性 |
| initial-scale | 范围在0到10之间的数 | 设备宽度与viewport大小之间的缩放比例 |
| maximum-scale | 范围在0到10之间的数 | 缩放的最大值 |
| minimum-scale | 范围在0到10之间的数 | 缩放的最小值 |
| user-scalable | yes/no, 默认为yes | 当前页面是否可以缩放 |
4、移动端页面开发viewport的理想配置
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
七、结语
从当下人们对手机的依赖程度来看，掌握移动端的适配对一名前端开发人员的重要性不言而喻，而理解viewport是你做移动端页面开发的第一步同时也是非常重要的一环。
