是什么
- 要知道一个东西是啥，首先要翻译过来，viewport：用户网页的可视区域
- 在前端开发中的移动端开发，你必须要设置这个属性，才能达到你想要的效果。
简单介绍一下
- viewport是一个移动端专属的Meta值，用于定义视口的各种行为。
- 该特性最开始是由Apple引入，用于解决移动端的页面展示的问题，后续被越来越多的开发者认可直到成为规范
- 通常viewport是指视窗、视口，浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。在移动端和pc端视口是不同的，pc端的视口是浏览器窗口区域，而在移动端有三个不同的视口概念：布局视口、视觉视口、理想视口
- 布局视口：在浏览器窗口css的布局区域，布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或其他值，一般都比移动端浏览器可视区域大很多，所以就会出现浏览器出现横向滚动条的情况
- 视觉视口：用户通过屏幕看到的页面区域，通过缩放查看显示内容的区域，在移动端缩放不会改变布局视口的宽度，当缩小的时候，屏幕覆盖的css像素变多，视觉视口变大，当放大的时候，屏幕覆盖的css像素变少，视觉视口变小。
- 理想视口：一般来讲，这个视口其实不是真实存在的，它对设备来说是一个最理想布局视口尺寸，在用户不进行手动缩放的情况下，可以将页面理想地展示。所谓的理想宽度就是浏览器（屏幕）的宽度。
怎么设置viewport
-
主流的设置viewport的方法
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable = no"/>
