理解各种像素概念及Viewport

有关像素的概念

逻辑像素

逻辑像素、CSS 像素、设备独立像素(DIP)、相对像素这几种说法其实是同一个东西，都是相对且抽象的，单位为 px，具体显示的有多大，要看浏览器的实现，而浏览器的实现需要考虑设备的物理像素、屏幕宽度等因素

物理像素（分辨率）

物理像素是屏幕在真实世界实际存在的点（把屏幕想像成一盏盏小灯聚在一起，物理像素就是灯的数量）

分辨率是描述物理像素的量，一般以 1080x720、320x568 等等这种形式去描述

像素密度：PPI（Pixel Per Inch）

像素密度是单位长度内物理像素点的数量，可用于描述清晰度，又名解析度（resolution），但要区别于分辨率

它是联系真实世界长度的关键量，像素密度越小，我们就越容易看到像素点

举个例子：

若物理分辨率是 axb

像素密度 = √(a^2+b2) / 屏幕尺寸

DPI vs PPI

DPI：dots per inch，表示每英寸（对角线长度）能打印上的墨滴数量。最初应用于打印技术中。打印设备多在 300 至 3600 DPI 之间。

PPI：pixels per inch，电子显示设备从打印设备中借鉴了 DPI 的概念，产生了 PPI的概念。即显示器每英寸（对角线长度）上像素点的数量，指像素密度

设备像素比：DPR(device pixels ratio)

因为逻辑像素和物理像素存在区别，css 里写的逻辑像素要按一定的比例转换成物理像素，这个比例就是 DPR

DPR = 物理像素 / 逻辑像素

通常，物理像素比逻辑像素多

Viewport

viewport 是浏览器的概念，它在 PC 端和移动端表现有差异，甚至在不同的浏览器上表现也有差异，这里只介绍大多数情况

PC端

viewport 指的是浏览器可视区域大小，使用CSS像素为单位，可以通过 document.documentElement.clientWidth 获取

同样可以通过 window.innerWidth 获取，区别在于后者把垂直滚动条算进去了，或者说前者是这个标签块的宽度

关于缩放

缩放 是通过调节DPR实现的。放大时，DPR增大，viewport 会减小（因为只能看到局部页面了）；缩小时反之。

CSS 百分比出现的问题

若设置 html > div 宽度为 100% ，指的是 100% 块的宽度 = viewport 宽度（所以会导致一个问题：父级元素使用百分比样式，子级元素使用px样式时可能会导致溢出，因为100%是相对html块的，这个块是可以通过拉伸浏览器窗口变化的，不一定能够容纳内部固定px的元素）

移动端

移动端因为尺寸问题，把viewport 分为了两个部分

• Layout Viewport（布局视区）：整个文档可视区域大小，也就是块的大小，可以通过 document.documentElement.clientWidth 获取
• Visual Viewport（可视视区）：当前正在查看的 Layout Viewport 部分大小，可以通过 window.visualViewport（chrome）或 window.innerWidth（safari） 获取

⚠️ 注意：这两个参数的获取在各大浏览器之间存在兼容性问题

image.png

image.png

image.png

此外还有一个概念：Ideal Viewport，指的是设备的屏幕宽度，只由设备决定。它的存在是因为移动设备的分辨率种类非常多，应用开发时不可能去适配每一种分辨率，应该让移动设备厂商去尽可能地适配320/375/400px等常用的屏幕宽度（依赖反转），通过 DPR 将屏幕宽度映射到物理分辨率****。

这三个量都是以 设备独立像素（CSS像素） 为单位

关于缩放

移动设备通过 scale 参数进行缩放

scale = Ideal Viewport Width / Visual Viewport Width

屏幕宽度不变，可视视区在变

举个例子：

• 页面缩小时，Scale 减小，即 Visual Viewport 增大，可以看到的 Layout 变大了（内容便多了）
• 页面增大时，Scale 增大，即 Visual Viewport 减小，可以看到的 Layout 变小了（内容变少了）

转换关系

image.png

参考

• A tale of two viewports — part one
• A tale of two viewports — part two
• 移动前端开发之viewport的深入理解
• https://github.com/jawil/blog/issues/21