屏幕分辨率大全
iPhone / 安卓 / iPad / PC / 显示器 / 设计稿尺寸 · 含 DPR / DPI / 物理尺寸
主流手机/平板/PC/设计稿尺寸
iPhone / 安卓 / iPad / PC / 显示器 / 设计稿尺寸 · 含 DPR / DPI / 物理尺寸
了解工具定位 · 使用场景 · 对比优势
前端开发者在切图或写响应式布局时,需要确认设计稿尺寸(如 375×812)是否覆盖主流手机(iPhone 13/14、小米 13、华为 P60)。本工具列出各机型物理像素和逻辑像素,快速比对设计稿与真实设备的差异,避免上线后出现按钮被裁切或文字溢出的问题。
UI 设计师在新建 Figma / Sketch 画板时,面对 1920×1080、1440×900、1366×768 三种 PC 尺寸不确定选哪个。本工具展示各尺寸的市占率和使用场景(办公本 vs 游戏屏),帮助设计师优先选用 1440×900 作为主画板,再输出 1920 的适配方案,减少后期返工。
数据可视化工程师在配置 4 块拼接屏(每块 1920×1080)时,需要计算总分辨率(7680×2160)并确认图表元素的最小字号。本工具提供拼接屏常见组合(2×2、1×3、1×4)的推荐分辨率,以及各尺寸下的安全边距,保证文字在 3 米外可读。
游戏 QA 测试员需要验证 UI 在 16:9、16:10、21:9 三种宽高比下的显示完整性。本工具列出各比例对应的常见分辨率(2560×1440、2560×1600、3440×1440),并标注了 21:9 超宽屏下 HUD 元素的推荐偏移量,减少每台设备手工截图比对的工作量。
| 维度 | 本工具 | 竞品 A(Can I Use) | 传统方法 |
|---|---|---|---|
| 数据隐私 | 纯浏览器,零上传 | 页面含追踪脚本,需联网 | 依赖人工查阅文档 |
| 处理速度 | 即时响应,无网络延迟 | 需加载外部资源,2-5 秒 | 数分钟至数小时 |
| 离线可用 | 完全离线,加载后断网可用 | 必须联网 | 需纸质手册或本地文件 |
| 覆盖范围 | 手机/平板/PC/设计稿尺寸 | 浏览器兼容性数据为主 | 依赖个人收集的零散资料 |
| 更新时效 | 静态数据,版本明确 | 实时更新,但依赖社区提交 | 取决于资料版本 |
| 使用门槛 | 输入分辨率即可查询 | 需理解浏览器/设备上下文 | 需熟悉行业标准文档 |
| 结果呈现 | 直接列出设备名称与尺寸 | 需解析兼容性表格 | 需自行比对数据 |
上手步骤 · 输入输出 · 避坑提示
| 输入 | 输出 | 说明 |
|---|---|---|
| iPhone 14 Pro Max | 2796 × 1290 (458 ppi) | 典型场景:查询最新旗舰手机分辨率 |
| iPad Pro 12.9 (2022) | 2732 × 2048 (264 ppi) | 典型场景:平板设计稿参考尺寸 |
| MacBook Pro 16 (2023) | 3456 × 2234 (254 ppi) | 典型场景:PC 端 UI 设计适配 |
| 1920 × 1080 | 1920 × 1080 (FHD) — 常见于 21-24 寸显示器 | 边界 case:用户直接输入分辨率而非设备名 |
| 3840 × 2160 | 3840 × 2160 (4K UHD) — 常见于 27-32 寸显示器 | 易错 case:4K 分辨率常被误写为 4096×2160 |
| 750 × 1334 | iPhone 6/6s/7/8 (375×667 pt @2x) | 典型场景:iOS 设计稿常用逻辑像素尺寸 |
| 360 × 640 | Android 常见基准分辨率 (360×640 dp) | 易错 case:Android 设计稿常混淆 dp 与 px |
| Samsung Galaxy S23 Ultra | 3088 × 1440 (500 ppi) | 边界 case:曲面屏设备分辨率含曲边像素 |
iPhone 14 Pro 分辨率是 2556×1179,但设计稿按 393×852 做,导致 UI 元素尺寸不对。设计时使用逻辑分辨率(393×852 pt),输出时按物理分辨率(2556×1179 @3x)切图。现代 Retina 屏幕的物理像素是逻辑像素的整数倍(@2x/@3x),直接使用物理分辨率做设计会导致元素过小。
搜索「24 英寸显示器分辨率」时,认为所有 24 英寸显示器都是 1920×1080。24 英寸显示器常见分辨率有 1920×1080(FHD)、2560×1440(QHD)、3840×2160(4K),需根据具体型号确认。屏幕尺寸是物理对角线长度,分辨率是像素数量,两者无固定对应关系;同尺寸下 PPI 差异巨大。
视频文件标注 1080p,认为播放设备的屏幕分辨率就是 1920×1080。1080p 视频可以在 720p 屏幕缩放播放,也可以在 4K 屏幕点对点显示;视频分辨率与屏幕分辨率是独立参数。视频分辨率是内容编码参数,屏幕分辨率是硬件物理参数;两者在播放时通过缩放/拉伸匹配。
设计稿按 1440×900(MacBook Air 13 寸)做,但实际网页在 1920×1080 显示器上显示时布局错乱。设计稿使用 1440×900 画板,但需标注响应式断点(如 ≥1200px 列数不变),或直接使用 1920×1080 画板。设计稿尺寸是创作时的参考画板,最终展示尺寸取决于用户设备;需通过响应式设计适配不同分辨率。
手机屏幕分辨率 2532×1170,认为网页可视区域也是 2532×1170 像素。实际浏览器可视区域高度需减去状态栏、地址栏、底部导航栏,通常可用高度约为物理高度的 70%-85%。浏览器 UI 元素(地址栏、工具栏、状态栏)会占据屏幕顶部和底部区域,CSS 中的 100vh 不等于物理高度。
屏幕 PPI 是 326,打印时也按 326 DPI 设置输出。屏幕用 PPI(每英寸像素数),打印用 DPI(每英寸点数);打印输出通常需 300 DPI 以上。PPI 是屏幕显示密度,DPI 是打印输出密度;两者单位相同但应用场景不同,混用会导致打印图片模糊或尺寸错误。
在 150% 缩放的 Windows 系统上截图,认为截图分辨率就是屏幕物理分辨率。150% 缩放时截图分辨率是物理分辨率的 2/3(如 1920×1080 屏幕截图实际为 1280×720 像素)。系统缩放比例会改变截图输出的像素数量;截图分辨率 = 物理分辨率 ÷ 缩放比例,而非物理分辨率本身。
显示器推荐 1920×1080,认为只能使用这个分辨率,不敢尝试 2560×1440 或 1280×720。推荐分辨率是显示器最佳显示效果的分辨率,但可以手动设置为其他分辨率(可能模糊或拉伸)。每个显示器有原生分辨率(最佳),但驱动支持多种分辨率;非原生分辨率会通过插值算法缩放显示。
公式推导 · 流程图解 · 依据出处
PPI = √(W² + H²) / D
PPI — 每英寸像素数,即像素密度W — 屏幕水平方向像素数(宽度)H — 屏幕垂直方向像素数(高度)D — 屏幕对角线物理尺寸(英寸)iPhone 14 Pro Max:分辨率 2796×1290,屏幕尺寸 6.7 英寸。W=2796,H=1290,D=6.7。PPI = √(2796² + 1290²) / 6.7 = √(7,817,616 + 1,664,100) / 6.7 = √9,481,716 / 6.7 ≈ 3079.1 / 6.7 ≈ 460 PPI。
适用于所有矩形屏幕(手机/平板/显示器/电视)。不适用于曲面屏或异形屏(如挖孔/刘海区域),实际视觉密度会略低于计算值。公式来源:ISO 9241-303 显示标准。
3 种主流语言 · 复制即用
import json
# 定义主流设备分辨率字典
resolutions = {
"iPhone 15 Pro Max": {"width": 1290, "height": 2796, "ppi": 460},
"iPad Pro 12.9": {"width": 2048, "height": 2732, "ppi": 264},
"MacBook Pro 16": {"width": 3456, "height": 2234, "ppi": 254},
"设计稿-Web 1920": {"width": 1920, "height": 1080, "ppi": 96},
"设计稿-iOS 375": {"width": 375, "height": 812, "ppi": 326},
}
# 按设备名查询分辨率
device = "iPhone 15 Pro Max"
if device in resolutions:
info = resolutions[device]
print(f"{device}: {info['width']}x{info['height']} @ {info['ppi']}ppi")
else:
print("未找到该设备")
# 输出所有设备列表
print(json.dumps(resolutions, indent=2))package main
import "fmt"
type Resolution struct {
Width int
Height int
PPI int
}
func main() {
// 定义主流设备分辨率映射
resolutions := map[string]Resolution{
"iPhone 15 Pro Max": {1290, 2796, 460},
"iPad Pro 12.9": {2048, 2732, 264},
"MacBook Pro 16": {3456, 2234, 254},
"设计稿-Web 1920": {1920, 1080, 96},
"设计稿-iOS 375": {375, 812, 326},
}
// 查询指定设备
device := "iPad Pro 12.9"
if info, ok := resolutions[device]; ok {
fmt.Printf("%s: %dx%d @ %dppi\n", device, info.Width, info.Height, info.PPI)
} else {
fmt.Println("未找到该设备")
}
// 遍历输出所有设备
for name, res := range resolutions {
fmt.Printf("%-20s %4dx%-4d %dppi\n", name, res.Width, res.Height, res.PPI)
}
}// 定义主流设备分辨率数据
const resolutions = {
'iPhone 15 Pro Max': { width: 1290, height: 2796, ppi: 460 },
'iPad Pro 12.9': { width: 2048, height: 2732, ppi: 264 },
'MacBook Pro 16': { width: 3456, height: 2234, ppi: 254 },
'设计稿-Web 1920': { width: 1920, height: 1080, ppi: 96 },
'设计稿-iOS 375': { width: 375, height: 812, ppi: 326 },
};
// 按设备名查询
const device = 'iPhone 15 Pro Max';
const info = resolutions[device];
if (info) {
console.log(`${device}: ${info.width}x${info.height} @ ${info.ppi}ppi`);
} else {
console.log('未找到该设备');
}
// 列出所有设备
Object.entries(resolutions).forEach(([name, res]) => {
console.log(`${name.padEnd(20)} ${res.width}x${res.height} ${res.ppi}ppi`);
});8 个高频疑问