参考文章:
https://segmentfault.com/a/1190000004978598
image.png
https://segmentfault.com/a/1190000004978598
image.png
https://www.w3cplus.com/javascript/viewport-device-scroll-document-size.html
image.png
1.我们现在有一个手机，它的屏幕物理宽度（物理分辨率）是1080px，
它的“设备宽度”（窗口宽度）是375px。
image.png
2.我们写一张网页html，不设置网页宽度，就是自适应浏览器宽度。就是流体宽度。
这时候如果直接把这张网页放到手机就是放到1080px的浏览器窗口里，网页就自适应为1080px。这样网页就太小了。
image.png
3.我们用一个中间层viewport放到浏览器窗口里，viewpot的宽度默认是1080px，这是网页放在viewport上,比浏览器窗口(375px)大,这时候网页就有横向滚动条.通过滑动来浏览页面.
然后我们通过设置viewport宽带(原本默认1080px)等于浏览器窗口宽度(375px),于是viewport就变成了375px。所以viewport上的页面也变成了375px。
代码是： <meta name="viewport" content="width=device-width, initial-scale=1.0">
image.png
4.再把网页自适应到viewport上，网页就自适应375px的viewpost，就变成了375px的网页！
image.png
viewport标签，在pc端是不会生效，是在移动设备端才会生效。
所以写个<viewport>标签，就能使得网页，当它在移动设备上时候就能适配移动端