11 个不同的 CSS 宽度覆盖整个系列:320, 360, 375, 390, 393, 402, 414, 420, 428, 430 和 440 像素。多个型号共享相同的宽度:验证其中一个即可验证其他。
| 型号 | CSS视口 | 密度 | 面板分辨率 | 对角线 | 年份 |
|---|---|---|---|---|---|
| Apple iPhone 17 | 402 × 874 | 3x | 1206 × 2622 | 6.3" | 2025 |
| Apple iPhone 17 PRO | 402 × 873 | 3x | 1206 × 2622 | 6.3" | 2025 |
| Apple iPhone 17 PRO MAX | 440 × 956 | 3x | 1320 × 2868 | 6.9" | 2025 |
| Apple iPhone Air | 420 × 912 | 3x | 1260 × 2736 | 6.5" | 2025 |
| Apple iPhone 16 | 393 × 852 | 3x | 1179 × 2556 | 6.1" | 2024 |
| Apple iPhone 16 Plus | 430 × 932 | 3x | 1290 × 2796 | 6.7" | 2024 |
| Apple iPhone 16 PRO MAX | 440 × 956 | 3x | 1320 × 2868 | 6.7" | 2024 |
| Apple iPhone 15 | 393 × 852 | 3x | 1179 × 2556 | 6.1" | 2023 |
| Apple iPhone 15 Plus | 430 × 932 | 3x | 1290 × 2796 | 6.7" | 2023 |
| Apple iPhone 15 PRO | 393 × 852 | 3x | 1179 × 2556 | 6.1" | 2023 |
| Apple iPhone 15 PRO MAX | 430 × 932 | 3x | 1290 × 2796 | 6.7" | 2023 |
| Apple iPhone 14 | 390 × 844 | 3x | 1170 × 2532 | 6.1" | 2022 |
| Apple iPhone 14 Plus | 428 × 926 | 3x | 1284 × 2778 | 6.7" | 2022 |
| Apple iPhone 14 PRO | 390 × 844 | 3x | 1179 × 2556 | 6.1" | 2022 |
| Apple iPhone 14 PRO MAX | 428 × 928 | 3x | 1290 × 2796 | 6.7" | 2022 |
| Apple iPhone 13 | 390 × 844 | 3x | 1170 × 2532 | 6.1" | 2021 |
| Apple iPhone 13 Mini | 375 × 812 | 3x | 1080 × 2340 | 5.4" | 2021 |
| Apple iPhone 13 PRO | 390 × 844 | 3x | 1170 × 2532 | 6.1" | 2021 |
| Apple iPhone 13 PRO MAX | 428 × 926 | 3x | 1284 × 2778 | 6.7" | 2021 |
| Apple iPhone 12 | 390 × 844 | 3x | 1170 × 2532 | 6.1" | 2020 |
| Apple iPhone 12 Mini | 360 × 780 | 3x | 1080 × 2340 | 5.4" | 2020 |
| Apple iPhone 12 Pro | 390 × 844 | 3x | 1170 × 2532 | 6.1" | 2020 |
| Apple iPhone 12 Pro Max | 428 × 926 | 3x | 1284 × 2778 | 6.7" | 2020 |
| Apple iPhone SE | 375 × 667 | 2x | 750 × 1334 | 4.7" | 2020 |
| Apple iPhone 11 | 414 × 896 | 2x | 828 × 1792 | 6.1" | 2019 |
| Apple iPhone 11 Pro | 375 × 812 | 3x | 1125 × 2436 | 5.8" | 2019 |
| Apple iPhone 11 Pro Max | 414 × 896 | 3x | 1242 × 2688 | 6.5" | 2019 |
| Apple iPhone SE | 320 × 568 | 2x | 640 × 1136 | 4" | 2018 |
| Apple iPhone X | 375 × 812 | 3x | 1125 × 2436 | 5.8" | 2018 |
| Apple iPhone XR | 414 × 896 | 2x | 828 × 1792 | 6.1" | 2018 |
| Apple iPhone XS Max | 414 × 896 | 3x | 1242 × 2688 | 6.5" | 2018 |
| Apple iPhone 8 | 375 × 667 | 2x | 750 × 1334 | 4.7" | 2017 |
| Apple iPhone 8 Plus | 414 × 736 | 3x | 1080 × 1920 | 5.5" | 2017 |
| Apple iPhone 7 | 375 × 667 | 2x | 750 × 1334 | 4.7" | 2016 |
| Apple iPhone 7 Plus | 414 × 736 | 3x | 1080 × 1920 | 5.5" | 2016 |
| Apple iPhone 6s | 375 × 667 | 2x | 750 × 1334 | 4.7" | 2015 |
| Apple iPhone 6s Plus | 414 × 736 | 3x | 1080 × 1920 | 5.5" | 2015 |
| Apple iPhone 6 | 375 × 667 | 2x | 750 × 1334 | 4.7" | 2014 |
| Apple iPhone 5c | 320 × 568 | 2x | 640 × 1136 | 4" | 2013 |
| Apple iPhone 5s | 320 × 568 | 2x | 640 × 1136 | 4" | 2013 |
| Apple iPhone 5 | 320 × 568 | 2x | 640 × 1136 | 4" | 2012 |
给出的宽度是系统默认缩放下浏览器窗口的宽度,而不是面板的分辨率:这是您的媒体查询所看到的第一个值。
| 型号 | CSS视口 | 密度 | 面板分辨率 | 对角线 | 年份 |
|---|---|---|---|---|---|
| Macbook Neo 2026 | 1204 × 753 | 2x | 2408 × 1506 | — | 2026 |
| Apple Macbook PRO 16" | 1728 × 1117 | 2x | 3456 × 2234 | 16.2" | 2021 |
| iMac 24" | 2048 × 1152 | 2x | 4096 × 2304 | 9.3" | 2021 |
| Apple MacBook Air 2020 13" | 1280 × 800 | 2x | 2560 × 1600 | 13.3" | 2020 |
值以纵向给出。在横向中,宽度和高度互换:Apple iPad Mini (6th Gen) 从 768 x 1024 像素 CSS 变为 1024 x 768 像素 CSS。您的平板断点应覆盖这两者。
| 型号 | CSS 视口(纵向) | 密度 | 面板分辨率 | 对角线 | 年份 |
|---|---|---|---|---|---|
| Apple iPad Mini (6th Gen) | 768 × 1024 | 2x | 1536 × 2048 | 7.9" | 2021 |
| Apple iPad Air 4 | 820 × 1180 | 2x | 1640 × 2360 | 9.7" | 2020 |
| Apple iPad PRO 11" (3rd Gen) | 834 × 1194 | 2x | 1668 × 2388 | 11" | 2018 |
这些手表的浏览器只显示一列:宽度是唯一重要的测量值,并且比所有手机的宽度都窄。
| 型号 | CSS视口 | 密度 | 面板分辨率 | 对角线 | 年份 |
|---|---|---|---|---|---|
| Apple Watch Series 6 (40mm) | 162 × 197 | 2x | 324 × 394 | 1.6" | 2020 |
该系列中最常见的宽度是 320, 375, 390 和 414 像素。首先检查它们可以覆盖列出的 Apple 的 49 个型号中的 25,并且您的第一个断点应落在这些宽度上。
降至 162 px 以覆盖整个范围,包括 Apple Watch Series 6 (40mm):在此宽度下的布局适用于所有地方。在平板电脑方面,还要考虑横向模式的值,其中宽度和高度互换。
注意高度:移动浏览器通过其界面栏减少可见区域,并在滚动时收缩。因此,100vh 的高度会超出第一个屏幕;建议使用 svh 和 dvh 单位。
表格提供测量值。扩展程序以模型的精确视口显示您的网站,包括其密度、User-Agent 和纵向或横向切换。
免费 · 4.9/5 基于5,100条评价
1,500,000+ 用户
375 x 812 像素,由列出的 49 个型号中的 8 个共享,包括 Apple iPhone 13 Mini和Apple iPhone SE。这是该系列中首先要检查的宽度。
162 px,列表中最窄型号的宽度,Apple Watch Series 6 (40mm)。如果您的布局适合 162 px,它适用于所列的 49 台 Apple 设备,直到最宽的达到 2048 px。
因为这些屏幕每个 CSS 像素显示多个物理像素。Apple iPhone 17 的面板有 1206 x 2622 像素,CSS 视口为 402 x 874 像素,密度为 3。在媒体查询中应写入第二个值。
值是反转的:Apple iPad Mini (6th Gen) 在纵向显示 768 x 1024 像素,在横向显示 1024 x 768 像素。表格给出纵向的值,模拟器允许在不同方向之间切换。
使用Mobile FIRST扩展:它在您的浏览器中直接重现这些型号的39个设备的视口、像素密度、User-Agent和触摸事件,包括在localhost地址上。
提到的品牌和型号属于各自的所有者。