什么是移动web

移动web就是在手机浏览器里面访问的web页面，除了一般的手机浏览器之外，好友一些程序内置的浏览器访问的页面也称之为移动web，例如微信公众号、小程序中的webview访问的页面等。

移动web与PCweb的区别

页面大小不一样。手机页面大小明显比PC页面大小小
布局方式不一样。PCweb布局元素设置死了宽高，移动web页面布局，元素宽高不能写死。

移动web的视口的设置

在移动web中通常要设置视口的大小，网页刚开始都是在电脑上现实的，只是经过发展后来才出现了移动web因此，要区分移动web和PCweb，如果不设置视口宽度默认是布局980px。

 <div>Lorem ipsum dolor sit, amet consectetur adipixcepturi ducimus recusandae, voluptates non at ullam molestiae?</div>

 * {margin: 0;padding: 0;box-sizing: border-box;}html {width: 100%;height: 100%;border: 1px solid palegreen;}div {width: 1200px;height: 200px;background-color: palegoldenrod;}

在这里插入图片描述

当我们没有设置视口宽度的时候可以看见，html的宽度已经超出了手机屏幕原本的宽度。
接下来我们设置视口宽度

 <!-- 在head标签中添加以下这行代码，表示设置视口宽度与设备宽度相等--><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scale=no, maximum-scale=1.0, minimum-scale=1.0">

在这里插入图片描述

由此可知，当我们设置视口宽度与设备宽度相等时，html的宽度就不会超出屏幕原本的宽度。
接下来我们了解一下这几个参数

width=device-width
该属性表示设置视口宽度与设备宽度相等
initial-scale=1.0
该属性表示初始缩放比例1.0，也就是页面在屏幕上显示按照正常大小显示
initial-scale=设备独立像素/布局视口宽度值
user-scale=no
该属性表示用户缩放，no表示不允许缩放，yes表示允许缩放。
maximum-scale=1.0
表示最大缩放比例是1.0
maximum-scale=设备独立像素/视觉视口宽度值
minimum-scale=1.0
表示最小缩放比例是1.0
viewport-fit
设置为cover可以解决刘海屏留白问题

移动web视口

布局视口
可以理解为页面在pc端显示的区域，只是与该区域等大的区域在移动web中称呼为布局视口。也就是说，布局视口是移动端为了完整的容纳pc端网页而专门设置的一个区域，它并不真实存在，但是可以感知到。
网页在PC端显示如下图所示

在手机端显示是这样的

在手机上显示pc端网页会出现滚动条，不滚动滚动条时显示的那块区域就是视觉视口，滚动滚动条显示的一整个就是布局视口。

视觉视口
视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口。
理想视口(iead viewport)
理想视口是一种标准，它规定当布局视口的宽度与手机屏幕的宽度相等时称为理想视口。如此，页面就可以完美的在手机屏幕上显示。
理想视口就是让页面在移动端上完整显示并且不出现滚动条的一个区域，该区域称之为理想视口。
完美视口就是通过viewport设置的