document.documentElement.clientWidth 不包含滚动条
window.innerWidth +滚动条
window.outerWidth +浏览器边框
window.width 屏幕区域
IPhone 6 的 屏幕分辨率 为 750*1334
IPhone 6 的尺寸 为 4.7 英寸
IPhone 6 的 像素比 DPR 为 2 window.devicePixelRatio;
IPhone 6 的 独立像素 为 375*667 window.innerWidth;
IPhone 6 的布局(视口)像素为 980*1743 document.documentElement.clientWidth
从技术层面上开讲，缩放就是放大或者缩小 css 像素面积的过程
改变的是视觉视口的尺寸（放大操作，视觉视口变小，看到的东西变少）
移动端的缩放，没有改变布局视口的任何东西，改变的是视觉视口
布局视口，视觉视口，理想视口 最终代表的都是屏幕的尺寸
在屏幕这一块区域中，不同的视口 包含了不同个数的 css 像素 个数
IPhone 6 ， 理想视口 = 布局视口 = 视觉视口 = 设备独立像素 = 375
- 用户缩放
- 布局视口不变，视觉视口改变
- 系统缩放
- 布局视口改变，视觉视口也改变
PC 端缩放
元素效果变大，元素具体像素值不变，css 像素的面积变大
移动端缩放 （缩放的是 布局视口，一旦 width 和 initial-scale 产生冲突，总是大的那一个生效）
- 放大
css 像素 面积变大，元素像素值不变，
单个 css 像素的物理像素变多
视觉视口 中装的 css 像素个数变少，视觉视口 变小
- initial-sscale css 像素的面积的改变
- 系统放大 2 ，布局视口由 375 变成 187.5： 相当于景观本身不变，人走近后视觉范围变小，看到的景观放大了
- 系统缩小 0.5 ，布局视口由345变成 750： 相当于景观本身不变，人走远，视觉范围变广，看到的景观缩小了
- 缩小
css 像素 面积变小，元素的像素值不变
单个 css 像素 的物理像素变少
视觉视口 中 css 像素个数变多，视觉视口 变大