要认真测试响应式设计，需要做三轮检查：把视口宽度从约 320px 缓慢拖到 1920px，找出布局出问题的位置；用具体机型的真实 User Agent 和像素比进行检查；再用长内容和 200% 缩放给布局施压。大多数响应式问题都出现在断点之间，或者出现在设计时没考虑到的内容上，所以只检查“手机、平板、桌面”三个固定尺寸会漏掉它们。
为什么只检查三个尺寸不够
布局只在几个宽度下设计，却会在所有宽度下被使用。在 375px 下放得下的标题，到了 344px（部分折叠屏手机合上时）可能会难看地换行。在 1024px 下放得下的导航栏，一旦某个菜单项变长，到 1100px 时就可能溢出。问题通常集中在：
- 每个断点的上下附近
- 没人设计过的宽度，比如 600–700px（小平板、分屏窗口）
- 比设计稿更长的真实内容
第一轮：宽度扫描
- 打开 Chrome DevTools，切换设备工具栏（
Ctrl + Shift + M，Mac 上为Cmd + Shift + M），选择 Responsive。 - 把宽度设为 320px，然后缓慢拖动右边缘，直到你支持的最大宽度。
- 注意观察：横向滚动条、文字重叠、按钮折成两行、图片被拉伸、栅格里剩下一张孤零零的卡片，以及断点切换时元素跳动。
- 一旦出现问题，记下工具栏显示的精确宽度。
在设备工具栏菜单中开启 Show media queries，断点就会以彩色条的形式显示在视口上方，点击色条即可跳到对应宽度。设备模式的分步说明见 Chrome 手机模拟器教程。
一个好习惯：每个断点都在精确值和少 1px 的值各测一次。max-width: 768px 和 min-width: 768px 之间差一像素的错误非常常见。
第二轮：真实设备配置
宽度只是手机上报信息的一部分。设备还会发送移动端 User Agent，像素比为 2 或 3，并可能触发服务器端或 JavaScript 中的不同逻辑。用具体的设备配置检查关键页面：
- 小屏手机（宽约 360–375px）
- 当前款 iPhone（393–402px）和大屏 iPhone（430–440px），数值见 iPhone 屏幕尺寸与视口一览表
- 一款 Android 手机（360–412px）
- 横竖屏状态下的平板（iPad 和平板查看指南）
DevTools 的设备预设可以完成这些检查。如果需要逐个点开很多页面，像 Mobile View Extension 这样的响应式测试插件会更快：它用设备的 User Agent、屏幕尺寸和像素比重新加载标签页，浏览时保持所选设备，还能把同一页面的不同视图并排对比。
第三轮：给内容施压
设计稿里的内容都很完美，真实网站却不是。试试这些：
- 长单词和长字符串：很长的商品名、德语翻译、窄栏里的邮箱地址或网址。需要时加上
overflow-wrap: anywhere。 - 更多或更少的条目：菜单从五项变成八项，栅格从六张卡片变成七张。
- 图片缺失：图片加载失败或仍在加载时，卡片是什么样子？
- 大字号：把浏览器默认字号设为 20px 或更大。用
rem构建的布局应能随之缩放，固定高度的盒子则会把文字截断。 - 桌面端 200% 和 400% 缩放：缩放会让 CSS 视口变窄，所以在 400% 时，1280px 宽的窗口表现得就像 320px 宽的屏幕。WCAG 2.2 要求在这个尺寸下内容能重新排布，不需要双向滚动，地图和数据表格等内容除外。
第四轮：自动截图
手动检查只能发现一次问题，而附在工单里的手机版截图能准确显示出问题的宽度。自动截图则能在问题再次出现时及时发现。借助 Playwright 这样的工具，一个简短的脚本就能在 Chromium、Firefox 和 WebKit 中，以 360、768、1024 和 1440px 等宽度打开关键页面，并在每次 pull request 时与上一版截图比较。这种视觉回归测试非常适合设计系统和经常改动的营销页面。
在线响应式检测工具
能把你的网址同时显示在多个框里的网站，适合快速浏览全貌。但它们有局限：它们从自己的服务器或通过 iframe 加载页面，因此访问不到 localhost 或需要登录的页面；很多网站禁止被嵌入框架；而且这些框通常只改变宽度，不改变 User Agent。用来看一眼可以，不要用来验收。
响应式设计测试清单
| 检查项 | 方法 |
|---|---|
| 从 320px 起任何宽度都没有横向滚动 | 宽度扫描 |
| 断点在精确值和少 1px 时都表现正常 | Show media queries，手动输入宽度 |
| 导航在所有宽度下都可用 | 宽度扫描 + 设备配置 |
| 图片在 2x 和 3x 屏幕上清晰 | 带像素比的设备配置 |
| 400% 缩放时内容能重新排布 | 桌面浏览器缩放 |
| 长内容不会撑破组件 | 内容压力测试 |
| WebKit 和 Gecko 中结果一致 | Safari 或模拟器、Firefox |
| 修改后没有回归问题 | 自动截图 |
布局之外更全面的上线前检查（表单、速度、SEO），请使用移动端网页测试清单。
常见问题
如何快速检查网站的响应式效果？
打开 Chrome DevTools，在设备工具栏中选择 Responsive 模式，从 320px 开始向上拖动宽度。任何溢出或重叠的地方都是响应式问题。
响应式设计应该测试哪些屏幕尺寸？
先从 320px 起扫描所有宽度，然后重点检查手机的 360、375、390–402、412 和 430–440px，平板的约 768–834px 和 1024px，以及桌面的 1280–1920px。
缩放浏览器窗口算有效的响应式测试吗？
用来测试 CSS 断点是有效的，但桌面浏览器缩到 500px 左右就无法再窄，也不会发送移动端 User Agent。测试手机宽度请使用设备模式或手机视图插件。