设备屏幕尺寸
2026 年最全设备屏幕尺寸速查表，涵盖 iPhone、Android 手机、iPad/平板、笔记本与桌面显示器。每台设备均列出物理分辨率、屏幕尺寸、PPI、CSS 逻辑宽度和缩放系数（DPR），帮助前端开发者和设计师快速选定适配目标。
没有找到匹配的设备
iPhone 屏幕尺寸一览
下表列出所有在售及近年主流 iPhone 型号的显示参数。CSS 宽度 = 物理宽度 ÷ 缩放系数。
| 型号 | 屏幕 | 分辨率 (px) | PPI | CSS 宽度 | 缩放 |
|---|---|---|---|---|---|
| iPhone 16 Pro Max | 6.9" | 2868 × 1320 | 460 | 440 | 3x |
| iPhone 16 Pro | 6.3" | 2622 × 1206 | 460 | 402 | 3x |
| iPhone 16 Plus | 6.7" | 2796 × 1290 | 460 | 430 | 3x |
| iPhone 16 | 6.1" | 2556 × 1179 | 460 | 393 | 3x |
| iPhone 15 Pro Max | 6.7" | 2796 × 1290 | 460 | 430 | 3x |
| iPhone 15 Pro | 6.1" | 2556 × 1179 | 460 | 393 | 3x |
| iPhone 15 Plus | 6.7" | 2778 × 1284 | 458 | 428 | 3x |
| iPhone 15 | 6.1" | 2556 × 1179 | 460 | 393 | 3x |
| iPhone 14 Pro Max | 6.7" | 2796 × 1290 | 460 | 430 | 3x |
| iPhone 14 Pro | 6.1" | 2556 × 1179 | 460 | 393 | 3x |
| iPhone 14 Plus | 6.7" | 2778 × 1284 | 458 | 428 | 3x |
| iPhone 14 | 6.1" | 2532 × 1170 | 460 | 390 | 3x |
| iPhone SE (3rd) | 4.7" | 1334 × 750 | 326 | 375 | 2x |
Android 热门机型屏幕尺寸
安卓阵营机型众多，以下精选全球出货量最高的主流旗舰与中端机型。
| 型号 | 屏幕 | 分辨率 (px) | PPI | CSS 宽度 | 缩放 |
|---|---|---|---|---|---|
| Samsung Galaxy S24 Ultra | 6.8" | 3120 × 1440 | 505 | 384 | 3.75x |
| Samsung Galaxy S24+ | 6.7" | 3120 × 1440 | 513 | 384 | 3.75x |
| Samsung Galaxy S24 | 6.2" | 2340 × 1080 | 416 | 360 | 3x |
| Samsung Galaxy A54 | 6.4" | 2340 × 1080 | 403 | 360 | 3x |
| Samsung Galaxy A34 | 6.6" | 2340 × 1080 | 390 | 360 | 3x |
| Google Pixel 8 Pro | 6.7" | 2992 × 1344 | 489 | 412 | 3.5x |
| Google Pixel 8 | 6.2" | 2400 × 1080 | 428 | 412 | 2.625x |
| Google Pixel 8a | 6.1" | 2400 × 1080 | 431 | 412 | 2.625x |
| OnePlus 12 | 6.82" | 3168 × 1440 | 510 | 412 | 3.5x |
| Xiaomi 14 | 6.36" | 2670 × 1200 | 460 | 400 | 3x |
| Xiaomi 14 Pro | 6.73" | 3200 × 1440 | 522 | 412 | 3.5x |
| OPPO Find X7 Ultra | 6.82" | 3168 × 1440 | 510 | 412 | 3.5x |
| 华为 Pura 70 Pro | 6.8" | 2844 × 1260 | 460 | 420 | 3x |
iPad 与平板电脑屏幕尺寸
iPad 系列采用统一的 2x 缩放（部分新款 iPad Pro 使用 2x 但面板分辨率更高）。三星 Galaxy Tab 也是热门平板选择。
| 型号 | 屏幕 | 分辨率 (px) | PPI | CSS 宽度 | 缩放 |
|---|---|---|---|---|---|
| iPad Pro 13" (M4) | 13" | 2752 × 2064 | 264 | 1032 | 2x |
| iPad Pro 11" (M4) | 11" | 2420 × 1668 | 264 | 834 | 2x |
| iPad Air 13" (M3) | 13" | 2732 × 2048 | 264 | 1024 | 2x |
| iPad Air 11" (M3) | 11" | 2360 × 1640 | 264 | 820 | 2x |
| iPad mini (A17 Pro) | 8.3" | 2266 × 1488 | 326 | 744 | 2x |
| iPad (10th gen) | 10.9" | 2360 × 1640 | 264 | 820 | 2x |
| Samsung Galaxy Tab S9 Ultra | 14.6" | 2960 × 1848 | 240 | -- | varies |
| Samsung Galaxy Tab S9+ | 12.4" | 2800 × 1752 | 266 | -- | varies |
| Samsung Galaxy Tab S9 | 11" | 2560 × 1600 | 274 | -- | varies |
| Samsung Galaxy Tab A9 | 8.7" | 1340 × 800 | 179 | -- | varies |
桌面与笔记本屏幕分辨率
以下列出常见桌面显示器分辨率标准和 Apple MacBook 系列的面板规格。
常见显示器分辨率
| 名称 | 分辨率 (px) | 宽高比 | 常见尺寸 |
|---|---|---|---|
| 4K / UHD | 3840 × 2160 | 16:9 | 27"–32" |
| QHD / 2K | 2560 × 1440 | 16:9 | 27" |
| WQXGA | 2560 × 1600 | 16:10 | 27" |
| Full HD / 1080p | 1920 × 1080 | 16:9 | 21"–27" |
| WXGA / HD | 1366 × 768 | ~16:9 | 14"–15.6" |
| HD+ | 1600 × 900 | 16:9 | 15.6" |
| 5K | 5120 × 2880 | 16:9 | 27" |
| 超宽 UWQHD | 3440 × 1440 | 21:9 | 34" |
Apple MacBook 系列
| 型号 | 屏幕 | 分辨率 (px) | PPI | 缩放 |
|---|---|---|---|---|
| MacBook Pro 16" (M3/M4) | 16.2" | 3456 × 2234 | 254 | 2x |
| MacBook Pro 14" (M3/M4) | 14.2" | 3024 × 1964 | 254 | 2x |
| MacBook Air 15" (M3/M4) | 15.3" | 2880 × 1864 | 224 | 2x |
| MacBook Air 13" (M3/M4) | 13.6" | 2560 × 1664 | 224 | 2x |
CSS 响应式断点参考
以下是 2026 年主流前端框架和设计系统推荐的断点值。设计断点应基于内容而非特定设备，但这些数值是公认的起点。
| 类别 | 断点范围 | 目标设备 |
|---|---|---|
| 超小屏 (xs) | 0 – 479px | 小屏手机（竖屏） |
| 小屏 (sm) | 480 – 767px | 大屏手机（竖屏） |
| 中屏 (md) | 768 – 1023px | 平板（竖屏）/ 大屏手机（横屏） |
| 大屏 (lg) | 1024 – 1439px | 平板（横屏）/ 笔记本 |
| 超大屏 (xl) | 1440 – 1919px | 桌面显示器 |
| 巨屏 (2xl) | 1920px+ | 大屏桌面 / 4K |
CSS Media Query 示例
/* Mobile-first approach */
@media (min-width: 480px) { /* sm – large phones */ }
@media (min-width: 768px) { /* md – tablets */ }
@media (min-width: 1024px) { /* lg – laptops */ }
@media (min-width: 1440px) { /* xl – desktops */ }
@media (min-width: 1920px) { /* 2xl – large desktops */ }
/* Tailwind CSS v3 defaults */
/* sm:640px md:768px lg:1024px xl:1280px 2xl:1536px */
/* Bootstrap 5 defaults */
/* sm:576px md:768px lg:992px xl:1200px xxl:1400px */
高 DPI 屏幕媒体查询
/* Target high-DPI (Retina) displays */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.hero-bg {
background-image: url('hero@2x.webp');
}
}
/* Target 3x displays (most modern phones) */
@media (-webkit-min-device-pixel-ratio: 3),
(min-resolution: 288dpi) {
.hero-bg {
background-image: url('hero@3x.webp');
}
}
Viewport（视口）与物理分辨率的区别
物理分辨率（Hardware Resolution）
屏幕上实际的物理像素数量。例如 iPhone 16 Pro 的物理分辨率是 2622 × 1206 像素。这决定了屏幕的清晰度，像素越多、图像越细腻。
CSS 视口宽度（Viewport / CSS Pixels）
浏览器报告给 CSS 的逻辑像素宽度。iPhone 16 Pro 的 CSS 宽度只有 402px，因为它使用了 3x 缩放。CSS 中写 width: 100px 在 3x 屏幕上实际占 300 个物理像素。
为什么这很重要？
响应式设计中，媒体查询 @media (max-width: 768px) 匹配的是 CSS 像素，而非物理像素。因此一台 1440p 物理分辨率的手机可能只有 360px 的 CSS 宽度，仍然会命中移动端断点。
DPR（设备像素比）详解
Device Pixel Ratio (DPR) 是物理像素与 CSS 像素的比值。DPR = 2 意味着每个 CSS 像素对应 2×2 = 4 个物理像素。理解 DPR 对图片优化至关重要——为 2x 屏幕提供 2 倍尺寸的图片，才能保证清晰度。
| DPR | 含义 | 代表设备 | 图片建议 |
|---|---|---|---|
| 1x | 1 CSS px = 1 物理 px | 旧款桌面显示器、低端笔记本 | 使用 1x 图片即可 |
| 2x | 1 CSS px = 4 物理 px | MacBook Retina、iPad、部分安卓 | 提供 @2x 图片 |
| 3x | 1 CSS px = 9 物理 px | iPhone 8+、所有现代 iPhone | 提供 @3x 图片 |
| 3.5x–4x | 1 CSS px = 12–16 物理 px | Pixel 8 Pro、Galaxy S24 Ultra | @3x 通常足够 |
使用 srcset 适配不同 DPR
<img
src="photo-400w.webp"
srcset="photo-400w.webp 1x,
photo-800w.webp 2x,
photo-1200w.webp 3x"
alt="Example photo"
width="400" height="300"
/>
/* Or use sizes for art direction */
<img
srcset="photo-320.webp 320w,
photo-640.webp 640w,
photo-960.webp 960w,
photo-1280.webp 1280w"
sizes="(max-width: 480px) 100vw,
(max-width: 1024px) 50vw,
33vw"
src="photo-640.webp"
alt="Responsive photo"
/>
响应式设计最佳实践
- 移动优先（Mobile-First） — 从最小屏幕开始编写 CSS，用
min-width媒体查询逐步增强。这能保证在低端设备上性能最优。 - 基于内容设断点 — 不要为特定设备设断点，而是在布局"破裂"的地方设断点。设备层出不穷，内容断点更可持续。
- 使用相对单位 — 优先使用
rem、em、vw、%而非固定px，让布局在各种尺寸下自然缩放。 - 图片使用 srcset — 为不同 DPR 和视口宽度提供多分辨率图片，避免在手机上加载 4K 大图浪费流量。
- 测试真实设备 — 浏览器 DevTools 的设备模拟只是近似，触摸交互、性能、字体渲染等都需要在真机上验证。
- 设置 viewport meta 标签 — 始终在
<head>中包含<meta name="viewport" content="width=device-width, initial-scale=1">，否则移动浏览器会以桌面宽度渲染。
常见问题 (FAQ)
CSS 像素和物理像素有什么区别？
物理像素是屏幕硬件上实际发光的点，CSS 像素是浏览器用于布局的逻辑单位。在高 DPI 屏幕上，一个 CSS 像素可能对应 2×2 甚至 3×3 个物理像素。写响应式 CSS 时，你操作的始终是 CSS 像素。
为什么 iPhone 的 CSS 宽度只有 390px 而分辨率却超过 1170px？
因为 iPhone 使用 3x 缩放 (DPR=3)。物理宽度 1179px ÷ 3 = 393px CSS 宽度。这样做让文字和 UI 元素在小屏上保持可读尺寸，同时利用高像素密度实现精细渲染。
我应该用哪些断点做响应式设计？
推荐使用 480px、768px、1024px 和 1440px 作为基准断点。但更好的做法是根据你的实际内容在何处"断裂"来调整。如果使用框架（如 Tailwind、Bootstrap），建议遵循其默认断点以保持一致性。
如何检测用户设备的屏幕分辨率？
在 JavaScript 中，
window.screen.width 和 window.screen.height 返回 CSS 像素分辨率，window.devicePixelRatio 返回 DPR。将两者相乘可得物理分辨率。CSS 中可用 min-resolution 媒体查询检测 DPI。图片应该提供几倍分辨率？
2x 图片可覆盖大多数场景（包括所有 Retina Mac 和 iPad）。3x 图片主要为 iPhone 和旗舰安卓手机准备。出于性能考虑，通常提供 1x 和 2x 即可，3x 在大多数情况下与 2x 差异不明显（因为屏幕太小，人眼难以分辨）。