在一个范围内的 11 种 CSS 宽度
模拟器中的 31 款 iPhone 分布在 11 种不同的宽度上，从 320 到 440 px。因此，验证您手头的型号并不能说明 10 其他型号的情况：布局是从一个型号到另一个型号，而不是从一个品牌到另一个品牌。
31 款可模拟 iPhone · 320 至 440 px · 纵向和横向
在线 iPhone 模拟器：无需设备测试您的网站
扩展程序在您的浏览器中重现 31 款 iPhone 的 viewport CSS、像素密度、User-Agent 和触控手势，宽度从 320 到 440 px。表格提供每个型号的测量值，每行链接到其完整规格。
1,500,000+ 安装 · 4.9/5 在Chrome Web Store上
几秒钟内免费安装 · 仅限电脑
为什么要在 iPhone 上测试您的网站？
2x 或 3x 的密度
根据代数，每个 CSS 像素由 2 或 3 个物理像素渲染：11 款型号为 2x，30 款为 3x。如果不提供高分辨率版本，前者清晰的图像在后者上会显得模糊。
纵向和横向
切换到横向，最近的 iPhone 宽度达到 956 px，并触发您为平板电脑保留的断点。这是测试最少的方向，也是固定标题占据屏幕一半的方向。
如何通过三步模拟 iPhone
无需 Mac、账户或系统镜像下载：模拟器适用于打开的标签页。
- 01 安装扩展 在 Chrome、Firefox 或 Edge 上，从官方商店获取。免费，无需创建账户。
- 02 从列表中选择一个 iPhone 31 款型号按代排序，从最新到最旧。网站将根据选择的型号的 viewport 和 User-Agent 重新加载。
- 03 比较代数，捕捉 并排显示两个 iPhone 以查看布局断裂的位置，切换到横向，导出裁剪的截图或视频。
模拟器中的 31 款 iPhone
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 5 | 320 × 568 | 2x | 640 × 1136 | 4" | 2012 |
优先测试哪些 iPhone 宽度
该系列中最常见的宽度是 375, 390 和 428 像素。首先检查它们可以覆盖表格中的 31 款型号中的 14 款：您的第一个断点应该落在它们上面，然后再添加其他断点。
降到 320 px 以覆盖整个系列，包括 Apple iPhone 5：在此宽度上保持的布局适用于所有在用的 iPhone。最近的型号达到 440 px，两者之间的差距为 120 px。
在带刘海或动态岛的型号上，可用区域不从屏幕边缘开始。声明 viewport-fit=cover，然后使用变量 env(safe-area-inset-top) 和 env(safe-area-inset-bottom) 保留边距：没有它们，页面底部的固定栏会在系统的主屏幕栏下方。
注意 Safari iOS 下的高度：界面栏减少可见区域，并在滚动时收缩。因此，100vh 的高度会超出第一个屏幕；svh 和 dvh 单位给出实际显示的值。
iPhone 模拟器、Xcode 模拟器还是 DevTools？
Xcode 模拟器运行真正的 iOS 和 Safari：这是重现 WebKit 渲染引擎错误的唯一方法。它需要 Mac、多个 GB 的下载，并且不会在集成会话中打开。
DevTools 的响应模式调整浏览器窗口大小并更改 User-Agent。这是一个检查工具：没有设备框架，没有真实的触控手势，一次只有一个屏幕，并且没有什么可以展示给客户。
Mobile FIRST 介于两者之间。它在您已打开的浏览器中重现 31 款 iPhone 的 viewport、密度、User-Agent 和触控事件，适用于 Windows、macOS 或 Linux，并并排显示多个型号。渲染引擎仍然是您的浏览器：要验证 WebKit 特有的行为，仍然需要真实设备或 Apple 的模拟器。
在 31 款 iPhone 上测试您的网站，无需购买一台
表格提供了测量值。扩展程序以型号的确切 viewport 显示您的网站，包括其密度、User-Agent 和纵向或横向切换。
- 31 款 iPhone 可用，从 iPhone 5 到当年发布的型号
- 真实的 Viewport、像素密度和 iOS User-Agent
- 两代并排以发现回归
- 适用于 localhost 和预生产环境
免费 · 4.9/5 基于5,100条评价
1,500,000+ 用户
常见问题
iPhone 的 CSS viewport 是什么？
它取决于型号，在模拟器的 31 款 iPhone 上宽度从 320 到 440 px。最常见的值是 390 px，由 6 款型号共享。您的媒体查询读取的是这种 CSS 像素宽度，而不是面板的分辨率。
模拟器真的使用 Safari 吗？
不，这一点很重要：它在您的浏览器引擎中重现 iPhone 的 viewport、像素密度、User-Agent 和触控手势。这涵盖了布局、断点和触控行为。对于 WebKit 引擎特有的错误，需要真实设备或 Xcode 模拟器。
可以在没有 Mac 的情况下模拟 iPhone 吗？
可以。扩展程序可以安装在 Windows、macOS 和 Linux 上的 Chrome、Firefox 和 Edge 上。与 Xcode 模拟器不同，它不需要 Apple 硬件或系统镜像下载。
扩展程序中有多少款 iPhone 可用？
31 款预配置型号，从最新到最旧，每次发布时更新。目录中的 10 款其他 iPhone 在网站上各有其技术规格：在自定义设备中记录其宽度和密度，以便在列表中找到它们。
模拟器宣布的 User-Agent 是什么？
所选设备的 User-Agent，与其实际发送的一样。对于 iOS 26.0 下的 Apple iPhone 17，是：Mozilla/5.0 (iPhone; CPU iPhone OS 26_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Mobile/15E148 Safari/604.1。因此，服务器和检测脚本会看到一个 iPhone，而不是您的桌面浏览器。
如何测试刘海和动态岛？
模拟器应用了型号的安全边距：忽略 env(safe-area-inset-bottom) 的布局会像在设备上一样显示问题。在 viewport 标签中声明 viewport-fit=cover 以使这些变量生效。
可以在模拟的 iPhone 上测试 localhost 上的网站吗？
可以。扩展程序适用于当前标签页，无论 URL 是什么：生产、预生产或开发期间的本地服务器。这使其不同于在线模拟器，后者无法看到您的机器。
列表中缺少一款 iPhone，怎么办？
使用相应规格的宽度、高度和密度创建一个自定义设备，然后保存：它将加入列表，并像预配置的型号一样运行。
iPhone、iPad、Safari 和 Xcode 是 Apple Inc. 的商标。Mobile FIRST 与 Apple 无关，也未获得 Apple 的批准。