打开 SCREEN SIZ.ES,可以查询主流设备的 CSS 视口(viewport)、物理分辨率、DPI、物理尺寸(毫米)和媒体查询断点建议值。这些参数原本分散在厂商开发者文档、Wikipedia 和 MDN 三处。该数据库免费、无广告,平均加载 1.2 秒,覆盖智能手机、平板、显示器、智能手表四大类。官网:screensiz.es。
SCREEN SIZ.ES 的核心数据字段
每台设备页面包含六个字段,数据全部来自厂商官方技术文档:
| 字段 | 含义 | 示例值 |
|---|---|---|
| 显示类型 | 屏幕面板技术 | LCD、OLED、AMOLED |
| 屏幕比例 | 宽高比 | 16:9、18:9、19.5:9 |
| DPI | 每英寸像素数 | 460 ppi |
| 物理分辨率 | 屏幕硬件像素 | 1920×1080 |
| CSS 单位尺寸 | 浏览器逻辑像素 | 393×852 |
| 物理尺寸 | 实际毫米尺寸 | 70.6×146.6 |
对前端开发最实用的是 CSS 单位尺寸和媒体查询建议值。点击设备即可直接获得 @media (min-width: 393px) 断点,无需再换算设备像素比(device pixel ratio)。设计师则常用物理尺寸字段制作高保真原型。
三步完成设备规格查询
整个查询流程极短,全程无需登录、无弹窗:
- 浏览器打开 screensiz.es
- 在搜索框输入设备名(如 "iPhone 15"),或按类型筛选
- 点击目标设备,复制 CSS 媒体查询断点或物理尺寸字段
与 ProtoFluid、Viewport Resizer 的取舍
SCREEN SIZ.ES 与动态响应式测试工具并非直接竞品,但开发者常需在两者间做选择。对比表如下:
| 维度 | SCREEN SIZ.ES | ProtoFluid / Viewport Resizer |
|---|---|---|
| 主要功能 | 静态屏幕规格数据库 | 动态响应式渲染测试 |
| 数据来源 | 厂商官方技术文档 | 浏览器 UA 模拟 |
| 实时渲染 | 不支持 | 支持 |
| CSS 断点建议值 | 直接给出 | 需自己测算 |
| 商业模式 | 完全免费、无广告 | 部分有 Pro 版 |
简单区分:SCREEN SIZ.ES 提供参数,ProtoFluid 提供渲染。两者功能互补。
SCREEN SIZ.ES 不解决什么问题
该平台一个较明显的短板是没有实时渲染功能。拿到 393px 断点后,仍需打开 Chrome DevTools 才能查看布局的实际效果。如果想测试“导航栏在 iPhone 15 Pro 上会不会换行”,SCREEN SIZ.ES 无法提供帮助,它只负责回答视口尺寸是 393×852。此外,该网站不提供设备版本对比,例如无法直接查看 iPhone 12 与 iPhone 15 的规格差异。










