1.手机拥有了浏览器的初期并没有专门为移动设备设计页面，造成的直接结果就是访问的页面是直接将电脑页面进行缩放，操作起来十分不便，viewport就是用来解决这个问题的
2.viewport视口属性（该属性只有在移动端浏览器上才有用）：移动设备上用来显示网页的区域（如果把移动该设备的浏览器当做相框的话，viewport就相当于相框中的画，可能会比相框小/大，需要的就是刚好一样大）
（1）修改viewport：可以通过meta标签去修改viewport的值，防止出现滚动条
移动web的常见设置：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
·name = 'viewport'告诉浏览器这个meta标签设置的是viewport属性
·content设置的是viewport属性的值（属性的赋值：属性名=属性值，其中属性名不是乱写的而是有固定的取值）
·width：宽度，其属性值device-width表示的是设备的宽度 （不需要给单位）
如果设备的屏幕大小比设备的视口大小要大就是能够正常显示的
·height：高度一般不设置，会让内容来撑大
initial-scale=1.0 --> 视口默认的缩放比例
maximum-scale=1.0 --> 最大的缩放值
minimum-scale=1.0 --> 最小的缩放值
user-scalable --> 是否允许用户缩放，一般其属性值是no，表示禁止用户缩放
（2）可选值
- width:
- 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
- initial-scale:
- 设置页面的初始缩放值，为一个数字，可以带小数
- minimum-scale:
- 允许用户的最小缩放值，为一个数字，可以带小数
- maximum-scale:
- 允许用户的最大缩放值，为一个数字，可以带小数
- height:
- 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
- user-scalable:
- 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
（3）在webStorm中将窗口作为移动端的快捷方式：meta:vp+tab
视口的作用：在移动浏览器中当页面宽度超出设备的宽度，浏览器内部虚拟了一个页面容器，将这个页面容器缩放到设备这么大，然后展示
目前大多数手机浏览器的视口（承载页面的容器）宽度都是980px
视口的宽度是可以通过meta标签去设置的：content里面的width
第三方框架的核样式表文件一般就是他的包名.css或者是包名.min.css，然后带min的一般都是压缩的，我们引用的是没有压缩的
来源：CSDN
作者：UNDEFINED_AUBE
链接：https://blog.csdn.net/UNDEFINED_AUBE/article/details/78935948