在没有 iPhone 的情况下测试网站，最准确的方法是使用 Mac 上 Xcode 自带的 iOS 模拟器。它运行的是真正的 iOS Safari，所以能显示 Safari 的渲染问题、屏幕键盘和浏览器界面。在 Windows 或 Linux 上没有官方的 iOS 模拟器，可选的方案有：通过 Playwright 使用 WebKit、付费的云端真机服务，或者用 Chrome 的手机视图检查布局。
下面介绍每种方案的工作方式以及它能发现哪些问题。
为什么在 iPhone 上测试需要 Safari，而不是 Chrome
iPhone 上的所有浏览器，包括 Chrome 和 Firefox，历来都必须使用苹果的 WebKit 引擎。苹果现在在部分地区允许使用其他引擎，但几乎所有 iPhone 用户看到的仍然是 WebKit。WebKit 在一些方面有自己的表现，比如 100vh 与会收起的地址栏、屏幕键盘弹出时的 position: fixed、表单控件、日期选择器以及部分较新的 CSS 特性。
这就是为什么一个页面在 Chrome 的 iPhone 模拟中看起来完美，到了真正的 iPhone 上却会出问题。Chrome 可以复制 iPhone 的屏幕尺寸和 user agent，但它用自己的引擎来绘制页面。
方案一：Mac 上的 Xcode Simulator（免费，最接近真机）
- 从 Mac App Store 安装 Xcode。下载体积较大。
- 打开 Xcode，进入 Settings > Components（旧版本中叫 Platforms），如果没有 iOS 运行时就安装一个。
- 通过 Xcode > Open Developer Tool > Simulator 打开模拟器。
- 用 File > Open Simulator 选择设备，在模拟手机中打开 Safari，输入网址。
模拟器与 Mac 共用网络，所以 http://localhost:3000 无需额外设置就能在其中打开。你可以旋转设备，在模拟的“设置”应用中调整文字大小，也可以测试深色模式。
用 Safari 网页检查器检查页面
要调试你看到的内容：
- 在 Mac 上打开 Safari，进入 设置 > 高级，打开 显示网页开发者功能。
- 在 Safari 的 开发 菜单中选择模拟器，再选择打开的页面。
这样就能对 iOS Safari 中运行的页面使用完整的网页检查器（元素、控制台、网络）。在手机上的 设置 > App > Safari 浏览器 > 高级（旧版 iOS 为 设置 > Safari 浏览器 > 高级）中打开 网页检查器 后，用数据线连接的真实 iPhone 也会出现在同一个菜单里。
方案二：通过 Playwright 使用 WebKit（Mac、Windows、Linux）
Playwright 是一个开源的浏览器自动化库，为三大桌面系统都提供了 WebKit 版本。它内置了各款 iPhone 的设备描述，可设置视口、像素比、user agent 和触控支持。
这不是 iOS Safari，而是桌面系统上的 WebKit 引擎，没有 iOS 特有的浏览器界面。不过它仍能发现相当一部分 WebKit 渲染差异，而且可以脚本化，你可以在 CI 中以 iPhone 尺寸截取每个关键页面。对于在 Windows 上开发的人来说，这是看到 WebKit 效果的最省钱的方式。
方案三：云端真机服务
BrowserStack、LambdaTest 和 Sauce Labs 等服务出租数据中心里的真实 iPhone，并把屏幕画面串流到你的浏览器。你能用到真实硬件、真正的 Safari 以及多个 iOS 版本。这些服务是收费的，通常只有有限的免费试用，远程画面也会有一些延迟。
在既没有 Mac 也没有 iPhone，或者需要旧版 iOS 时，可以用它们对重要流程（注册、结账）做最终检查。
方案四：在 Chrome 中快速查看 iPhone 尺寸视图
如果只是布局问题（菜单在 390 px 下是否放得下、主图裁切是否合适），Chrome 的 iPhone 尺寸视图就够用了，几秒钟即可完成：
- 选择 iPhone 预设的 Chrome DevTools 设备模式，详见 Chrome 手机模拟器使用指南
- Mobile View Extension 这类手机视图扩展，它会用 iPhone 的 user agent 和屏幕尺寸，在 iPhone 外框中重新加载标签页
把这当作第一轮检查。凡是看起来不对劲的地方，以及涉及表单、滚动或固定元素的内容，都值得再用方案一、二或三检查一遍。
各方案能发现什么
| 问题 | Chrome 手机视图 | Playwright WebKit | Xcode Simulator | 云端真机 |
|---|---|---|---|---|
| iPhone 宽度下的布局 | 能 | 能 | 能 | 能 |
| 服务器返回不同的移动版页面 | 能（user agent） | 能 | 能 | 能 |
| WebKit 中的 CSS 和 JavaScript 差异 | 不能 | 大部分能 | 能 | 能 |
地址栏与 100vh 的表现 |
不能 | 不能 | 能 | 能 |
| 屏幕键盘遮挡输入框 | 不能 | 不能 | 能 | 能 |
| 真实的性能和内存 | 不能 | 不能 | 不能 | 能 |
实用的 iPhone 测试流程
- 在 Chrome 手机视图中检查 375 px 和 393–402 px 下的布局。
- 在 Xcode Simulator（Windows 上用 Playwright WebKit）中打开关键页面。
- 填写每个表单字段，留意键盘和固定元素的表现。
- 滚动长页面，观察固定页眉与地址栏之间的相互影响。
- 上线前，至少在真实 iPhone 或云端真机上把最重要的流程走一遍。
当前 iPhone 的视口尺寸见 iPhone 屏幕尺寸与视口一览表。访客使用的其他浏览器，请参阅浏览器兼容性测试清单。
常见问题
能在 Windows 上测试网站在 iPhone Safari 中的效果吗？
无法使用官方模拟器，因为苹果的 Simulator 只能在 macOS 上运行。在 Windows 上，可以用 Playwright 中的 WebKit 做引擎层面的检查，或用云端真机服务测试真正的 Safari。
Xcode Simulator 和真实的 iPhone 一样吗？
它运行的是真正的 iOS 和 Safari，所以渲染效果非常接近。但它跑在 Mac 的处理器上，因此性能、内存限制和部分硬件功能与真机不同。
为什么网站在 Chrome 的 iPhone 模拟中正常，到 iPhone 上却出问题？
Chrome 的模拟复制了 iPhone 的尺寸和 user agent，但用的是 Chrome 的引擎渲染。Safari WebKit 引擎特有的问题只会在 Safari 中出现。