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

 

 

 

基础知识

图像其实都是由一个一个格子组成

像素比

 

• 屏幕尺寸
• 指的是屏幕的对角线长度，单位是 inch 英寸，1英寸 约等于 2.54 厘米

常见的屏幕有 2.4，2.8，3.5，3.7，4.2，5.0，5.5，6.0

IPhone4    3.5

IPhone6    4.7

IPhone6Plus    5.5

 

• 屏幕分辨率

IPhone6 的屏幕分辨率为 750*1334

• 指在 横 纵 向上的像素点数（物理像素，构成了屏幕的分辨率），单位是 px，1px = 1 个像素点，即 1 像素指的是物理设备的 1 个像素点
• 横纵向上，指 xy 轴正方向
• 高清屏（视网膜屏）

 

• 屏幕像素密度 / 像素密度 / 屏幕密度 = 屏幕分辨率 / 屏幕尺寸 = (1080*1920)/5 = Math.sqrt(1080*1080+1920*1920)   /5 = 440 dpi 

屏幕上每英寸 能够显示的像素点的数量，单位是 ppi，即 "pixels per inch"，也有叫 dpi，都是由设备厂商规定的，不能进行修改

 

Mobile 相关

•  设备像素（物理像素）

屏幕上能显示的最小粒度（能够理解为屏幕上最小的一个点） 

• 显示设备中的一个最微小的物理部件
• 每一个像素能够根据操做系统设置本身的颜色和亮度（手机亮度调节，其实就是调节每一个物理像素的亮度）
• 任何设备的物理像素 数量都是固定的

 

• css 像素

是一个抽象的单位，主要使用在浏览器上，用来精确的度量（肯定）Web 页面上的内容

是由 Web 开发者 创造的，在 css 或者 JavaScript 中使用的一个抽象的层

通常状况下，css 像素 被称为 与设备无关的像素（device-independent 像素），简称 "DIPs"

在一个标准的显示密度下（普通屏），一个 css 像素 对应一个 设备像素

 

• css 像素 与 物理像素 之间的关系
• 一个 width 为 200px 的元素，占据了 200 个 css 像素
• 但这 200 个像素到底占据了多少个 物理像素 ，取决于
• 屏幕特性（根据 像素比 区分）
  • 普通屏
  • 高清屏
• 用户缩放行为
  • 放大
  • 缩小

若是是普通屏， css 像素 / 物理像素 = 1

若是是高清屏， css 像素 / 物理像素 = 1 / 多

在苹果的高清屏上，像素密度是普通屏幕的 2 倍，这个元素就跨越了 400 个设备像素，若是用户放大，它将跨越更多的设备像素

 

• 设备独立像素（密度无关像素）

也是由 设备厂商 规定的，是不可进行修改的

能够认为是计算机坐标系统中的一个点

这个点表明一个能够由程序使用的虚拟像素（好比 css 像素），而后由关系系统转换为 物理像素。

在某种条件下，设备独立像素 会转换为 相应的 css 像素

 

 

• 位图像素

一个位图像素，是 栅格图像（png，jpg，gif） 的最小数据单元

1 个位图图像 对应 1 个物理像素时，图片是最清晰的。

 

 

• 对于 Web 开发者而言

咱们使用的 css 和 JavaScript 定义的像素，本质上表示的都是 css 像素

在开发过程当中，并不在乎 css 像素到底跨越了多少个设备像素，

这个依赖于 屏幕特性和用户缩放行为的复杂计算 交给了浏览器。

 

• 像素比（屏幕特性，高清屏仍是普通屏？）

像素比 DPR  = 设备物理像素 / 设备独立像素

window.devicePixelRatio = 物理像素 / 独立像素

若是 console.log(window.devicePixelRatio); 是 1 ，则是普通屏

IPhone 6 的 像素比 DPR 是 2

IPhone 6 Plus 和 IPhoneX 的 像素比 DPR 是 3