设备屏幕尺寸与分辨率

逻辑分辨率、物理分辨率与 DPR

每块现代屏幕都有两种分辨率。物理分辨率是面板内置的真实像素数量——例如 iPhone 15 为 1179 × 2556。逻辑(CSS)分辨率则是网页布局所使用的较小坐标空间,例如 393 × 852。设备像素比(DPR)是连接两者的桥梁:它等于物理分辨率除以逻辑分辨率,因此 DPR 为 3 意味着手机为每个 CSS 像素绘制一个 3 × 3 的真实像素块。高密度的“视网膜”手机和笔记本电脑使用 2 或 3 的 DPR 来呈现清晰的文字和图像,而典型的桌面显示器 DPR 为 1,此时一个 CSS 像素等于一个物理像素。

为什么设计师以视口尺寸为基准

在构建响应式布局时,CSS 媒体查询和断点都以 CSS 像素(即逻辑视口)为单位度量,而不是面板的物理像素。一部物理宽度为 1080 像素的手机,其视口仍然只会报告 360–414 个 CSS 像素,这正是 360px 移动端断点能覆盖大多数安卓手机的原因。以视口而非原始分辨率为设计基准,可以让文字和触控目标在像素密度差异很大的设备上保持一致的实际大小,从而使同一套布局在低密度笔记本电脑和高密度旗舰手机上都能呈现出恰当的效果。

如何解读此表格

• 视口(CSS px)是网页所看到的逻辑尺寸,按设备的自然方向列出——手机和平板为竖屏,笔记本电脑和显示器为横屏。
• 物理分辨率是面板的真实像素数量,也就是规格表中标注的数值。
• DPR(设备像素比)将视口放大至物理分辨率;任何大于 1 的数值都意味着高密度屏幕。
• 宽高比是屏幕的形状,从现代手机纤长的 19.5:9,到大多数显示器的 16:9,再到超宽屏的 21:9 和 32:9。
• 笔记本电脑和 4K 行反映的是常见的默认显示缩放级别,因此视口可能小于面板的原生分辨率。

尺寸因机型而异,且不断变化

请将这些数据视为实用参考,而非绝对保证。制造商几乎每一代都会调整屏幕尺寸——仅 iPhone 近几代机型就使用过 375、390、393、402、414、430 和 440 个 CSS 像素宽的视口——安卓设备的差异则更大。操作系统的显示缩放还会进一步改变报告的视口:一台 1080p 的 Windows 笔记本电脑在 150% 缩放下,表现得就像一块 DPR 为 1.5 的 1280 × 720 屏幕。最可靠的数字永远是你自己浏览器所报告的那个,这也是为什么上方会实时检测并匹配你当前使用的设备。