mobile_缩放

 

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 像素个数变多，视觉视口 变大