有关像素的概念

逻辑像素

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

物理像素(分辨率)

物理像素是屏幕在真实世界实际存在的点(把屏幕想像成一盏盏小灯聚在一起,物理像素就是灯的数量)
分辨率是描述物理像素的量,一般以 1080x720、320x568 等等这种形式去描述

像素密度:PPI(Pixel Per Inch)

像素密度是单位长度内物理像素点的数量,可用于描述清晰度,又名解析度(resolution),但要区别于分辨率
它是联系真实世界长度的关键量,像素密度越小,我们就越容易看到像素点

举个例子:
若物理分辨率是 axb
像素密度 = √(a^2+b^2) / 屏幕尺寸

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 获取,区别在于后者把垂直滚动条算进去了,或者说前者是<html>这个标签块的宽度

关于缩放

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

CSS 百分比出现的问题

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

移动端

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

  • Layout Viewport(布局视区):整个文档可视区域大小,也就是<html>块的大小,可以通过 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

参考