49 设备 · 智能手机, 平板电脑, 计算机和智能手表

Apple 设备:CSS 视口、密度和屏幕分辨率

列出的 Apple 的 49 个设备的显示特性,每个设备都有其媒体查询的宽度、像素密度和面板分辨率。39 个设备可以直接在您的浏览器中测试。

智能手机 Apple

41 个模型 · 2012 → 2025

11 个不同的 CSS 宽度覆盖整个系列:320, 360, 375, 390, 393, 402, 414, 420, 428, 430 和 440 像素。多个型号共享相同的宽度:验证其中一个即可验证其他。

Apple 设备的 CSS 视口、像素密度、分辨率和对角线
型号 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

计算机 Apple

4 个模型 · 默认缩放

给出的宽度是系统默认缩放下浏览器窗口的宽度,而不是面板的分辨率:这是您的媒体查询所看到的第一个值。

Apple 设备的 CSS 视口、像素密度、分辨率和对角线
型号 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

3 个模型 · 纵向值

值以纵向给出。在横向中,宽度和高度互换:Apple iPad Mini (6th Gen) 从 768 x 1024 像素 CSS 变为 1024 x 768 像素 CSS。您的平板断点应覆盖这两者。

Apple 设备的 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

智能手表 Apple

1 个模型

这些手表的浏览器只显示一列:宽度是唯一重要的测量值,并且比所有手机的宽度都窄。

Apple 设备的 CSS 视口、像素密度、分辨率和对角线
型号 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 单位。

在 39 个 Apple 设备上测试您的网站,无需购买任何设备

表格提供测量值。扩展程序以模型的精确视口显示您的网站,包括其密度、User-Agent 和纵向或横向切换。

  • 39 个 Apple 设备可供使用,从旧型号到当年发布的型号
  • 以设备格式导出的截图和视频
  • 在您的本地环境和预生产环境中工作

免费 · 4.9/5 基于5,100条评价
1,500,000+ 用户

常见问题

Apple 最常见的 CSS 视口是什么?

375 x 812 像素,由列出的 49 个型号中的 8 个共享,包括 Apple iPhone 13 Mini和Apple iPhone SE。这是该系列中首先要检查的宽度。

测试 Apple 设备的最小宽度是多少?

162 px,列表中最窄型号的宽度,Apple Watch Series 6 (40mm)。如果您的布局适合 162 px,它适用于所列的 49 台 Apple 设备,直到最宽的达到 2048 px。

为什么 Apple 宣布的分辨率与 CSS 视口不符?

因为这些屏幕每个 CSS 像素显示多个物理像素。Apple iPhone 17 的面板有 1206 x 2622 像素,CSS 视口为 402 x 874 像素,密度为 3。在媒体查询中应写入第二个值。

Apple 平板电脑在纵向和横向是否有相同的视口?

值是反转的:Apple iPad Mini (6th Gen) 在纵向显示 768 x 1024 像素,在横向显示 1024 x 768 像素。表格给出纵向的值,模拟器允许在不同方向之间切换。

如何在没有 Apple 设备的情况下测试自己的网站?

使用Mobile FIRST扩展:它在您的浏览器中直接重现这些型号的39个设备的视口、像素密度、User-Agent和触摸事件,包括在localhost地址上。

提到的品牌和型号属于各自的所有者。