要在 Chrome 中以 iPad 视图查看网站，打开 DevTools，切换设备工具栏（Ctrl + Shift + M，Mac 上为 Cmd + Shift + M），在 Dimensions 列表中选择 iPad，或者输入 820 × 1180 这样的平板尺寸。带平板预设的手机视图扩展也能通过工具栏按钮实现同样的效果。不过，在相信你看到的结果之前，请先读一读下文关于 iPad Safari 的部分：真实的 iPad 经常加载的是网站的桌面版。
为什么平板测试容易出错
平板处在响应式设计中一个尴尬的中间地带。它们的竖屏宽度（当前 iPad 大约在 744 到 1032 个 CSS 像素之间）恰好落在最常用的断点 768 px 和 1024 px 上。平板一旋转，布局就可能在“手机”和“桌面”之间切换，而固定页眉、侧边菜单和多列网格往往正是在这里出问题。
还有第二个陷阱，和宽度毫无关系。
iPad Safari 默认请求桌面版网站
从 iPadOS 13 开始，iPad 上的 Safari 默认请求网站的桌面版。它发送的 user agent 看起来像 Mac 上的 Safari，而不是 iPad。这意味着：
- 根据 user agent 识别移动设备的服务器，会把 iPad 当成台式电脑
- 你的 CSS 仍然跟随真实的视口宽度，所以媒体查询会按预期工作
- 输入方式仍然只有触控，尽管网站以为自己面对的是一台 Mac
所以，当你在 Chrome 中用“iPad”的 user agent 模拟 iPad 时，看到的可能是真实 iPad 用户永远不会看到的版本。要做诚实的测试，两种情况都要检查：iPad 视口配移动端/iPad user agent，以及同样的视口配桌面端 user agent。在 DevTools 中，可以在 More tools > Network conditions 里覆盖 user agent，步骤见如何在 Chrome 中修改 user agent。
方法一：DevTools 设备模式
- 打开 DevTools，切换设备工具栏。
- 在 Dimensions 菜单中选择 iPad 机型（如果列表中有）。如果没有，点击 Edit 启用更多设备，或选择 Responsive 并输入尺寸。
- 点击旋转图标测试横屏。
- 刷新页面。
设备模式还能模拟触摸事件，便于测试点按后展开的平板菜单。详见 Chrome 手机模拟器使用指南。
方法二：带平板预设的手机视图扩展
如果你经常检查平板布局，用扩展会更快。Mobile View Extension 在手机预设旁边还提供平板预设，支持竖屏和横屏；目标设备不在列表中时，还可以输入自定义分辨率。它会用对应的 user agent 和屏幕尺寸重新加载标签页，并在你浏览时保持该视图。和所有浏览器内的预览一样，它用鼠标操作，而不是触控输入。
方法三：用 Xcode Simulator 测试真正的 iPad Safari
在 Mac 上，Xcode Simulator 运行的是真正的 iPadOS 和 Safari。它能显示上文所说的“桌面版网站”行为、Safari 自身的渲染以及屏幕键盘。它免费但体积很大，并且只支持 macOS。步骤与没有 iPhone 如何测试网站中的相同。
当前 iPad 的视口尺寸
以下是竖屏下的 CSS 视口尺寸，由苹果公布的屏幕分辨率除以设备像素比 2 得出。
| iPad 机型 | 屏幕 | 物理分辨率 | CSS 视口（竖屏） |
|---|---|---|---|
| iPad mini（第 6、7 代） | 8.3 英寸 | 1488 × 2266 | 744 × 1133 |
| iPad（第 10 代及 A16） | 10.9–11 英寸 | 1640 × 2360 | 820 × 1180 |
| iPad Air 11 英寸（M2 及更新） | 11 英寸 | 1640 × 2360 | 820 × 1180 |
| iPad Air 13 英寸（M2 及更新） | 13 英寸 | 2048 × 2732 | 1024 × 1366 |
| iPad Pro 11 英寸（M4 及更新） | 11 英寸 | 1668 × 2420 | 834 × 1210 |
| iPad Pro 13 英寸（M4 及更新） | 13 英寸 | 2064 × 2752 | 1032 × 1376 |
苹果经常更新 iPad，所以请在苹果的技术规格页面核对你要适配的具体机型。
安卓平板的差异要大得多。比较实用的测试组合是 800 × 1280、600 × 960（7–8 英寸的小平板），以及 1280 × 800 这样的宽横屏尺寸。
平板尺寸下要检查什么
- 导航。 菜单从汉堡图标切换为完整导航栏的宽度，是否真的放得下完整导航栏？
- 网格。 三列卡片网格会不会变成拥挤的两列，还剩下落单的元素？
- 仅限悬停的交互。 靠悬停展开的下拉菜单，在触屏上毫无反应。确保它们点按也能打开。
- 横屏。 旋转后再检查一遍：横屏下 1180 px 的宽度，可能会在 10.9 英寸的屏幕上触发桌面布局。
- 图片和视频。 平板是高密度屏幕，低分辨率图片会显得模糊。
适合平板的断点，请参阅响应式断点。
常见问题
测试 iPad 应该用什么屏幕尺寸？
先测 820 × 1180（iPad 和 iPad Air 11 英寸）和 1024 × 1366（13 英寸机型），横竖屏都要测。如果 iPad mini 对你的用户很重要，再加上 744 × 1133。
为什么我的网站在 iPad 上显示的是桌面版？
iPad Safari 默认请求桌面版网站，并发送类似 Mac 的 user agent。如果你的网站根据 user agent 选择版本，iPad 拿到的就是桌面版。基于 CSS 宽度的响应式布局可以避免这个问题。
不用 DevTools 能在 Chrome 中测试平板视图吗？
可以。带平板预设的手机视图扩展（例如 Mobile View Extension）可以通过工具栏按钮显示平板尺寸。