viewport 适配的原理及解析

为什么要去做适配？

因为手机厂商设置的手机页面都是980；如果是在iPhone 6（375px)的视口套一个980的页面，就会放不下；
那当你使用viewport适配后，页面的宽度不是固定的，它会随着设备的尺寸（设备独立像素）的大小改变而改变；

下面是如何做viewport适配：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

如果是在vue/cli 3.0 中 直接在.html 文件中加上面的meta 标签（一般会自带）

下面解析一下上面meta 标签：

width = device-width //设备独立像素的宽度（视觉视口） 赋值 给页面的宽度（也是布局视口）
（width 页面的宽度（布局视口）
device-width 设备独立像素的宽度（视觉视口）

initial-scale = 1.0 //这个是缩放比
（也就是 设备独立像素 ：物理像素 = 1）
（如果是 initial-scale = 0.5 那缩放比是0.5 ，如果设备独立像素是375,那物理像素就是750 也就是页面的宽度是750）

配图如下：