viewport相关理解：
1、手机屏幕是硬件属性，无法通过js或meta标签修改。手机屏幕物理像素，即像素、分辨率、PPI（pixel per inch）
2、手机屏幕逻辑像素[dip]（理想视口、分辨率、设备独立像素【代表应用使用的像素，如CSS使用的像素】），物理像素（视觉视口、像素分辨率、设备像素【设备实际拥有的像素】）经过折算（/倍率）之后的像素数（逻辑像素 = 物理像素 / 倍率），如：
iphone5：分辨率 320 * 558，物理像素 640 * 1136， @2x；
iPhone6：分辨率 375 * 667，物理像素 750 * 1334，@2x；
iPhone6 Plus ：分辨率 414 * 736，物理像素1242 * 2208，@3x（注意，实际显示图像等比降低至1080×1920）
3、CSS像素：用于页面布局的单位，样式像素尺寸（如 width：66px）是以CSS像素为单位指定的。CSS像素与dip（设备逻辑像素）的比值即为网页缩放比例，即 initial-scale = CSS像素 / 设备逻辑像素（dip、理想视口），知道DPR后可以将CSS像素正确转换为设备像素。
4、<meta name="viewport" content="width=device-width; initial-scale=1; minimum-scale=1; maximum-scale=1" />
| 属性名 | 取值 | 描述 |
| width | 正整数 或 device-width | 定义视口的宽度，单位为像素 |
| height | 正整数 或 device-height | 定义视口的高度，单位为像素，一般不用 |
| initial-scale | [0.0-10.0] | 定义初始缩放值 |
| minimum-scale | [0.0-10.0] | 定义缩小最小比例，它必须小于或等于maximum-scale设置 |
| maximum-scale | [0.0-10.0] | 定义放大最大比例，它必须大于或等于minimum-scale设置 |
| user-scalable | yes/no | 定义是否允许用户手动缩放页面，默认值yes |
1、桌面浏览器中，css的1px = 电脑屏幕的1个物理像素。css的像素是一个抽象值，在不同的设备或不同的环境中其代表的设备物理像素不一样。
移动端的屏幕物理像素 = 屏幕像素密度 = 分辨率 ！= 屏幕尺寸
原文：https://www.cnblogs.com/L-xjco/p/11454491.html