1. 需测试的核心视口宽度集合 #

覆盖主流设备、边缘场景和断点临界值，推荐按以下类别划分：

• 移动端：
  • 边缘小屏：280px（折叠屏最小状态、旧款安卓功能机）
  • 主流手机：375px（iPhone SE/14）、414px（iPhone 14 Plus）、390px（iPhone 14 Pro）
• 平板端：
  • 竖屏：768px（iPad）
  • 横屏：1024px（iPad）、800px（中低端安卓平板）
• 桌面端：
  • 主流笔记本：1280px
  • 高端屏：1440px
  • 超宽屏：1920px、2560px

2. CSS断点 vs 真实设备分辨率：优先顺序 #

优先以CSS断点为核心，再结合真实设备视口做验证：

• 先测断点的临界值：比如项目断点是768px（平板竖屏），必须测767px（断点前1px）和768px（断点值），确保布局在断点切换时无异常
• 真实设备分辨率≠视口宽度，比如iPhone 14 Pro的物理分辨率是2556×1179，但实际视口是390×844，测试时用视口宽度而非物理分辨率
• 用真实设备验证断点对应的实际渲染效果，比如iOS的字体渲染、安卓的触摸反馈等模拟器无法完全还原的细节

3. 真实设备与浏览器模拟器的使用比例 #

行业通用比例大概是70%模拟器 + 30%真实设备：

• 模拟器（Chrome DevTools、Firefox Responsive Design Mode）：快速覆盖多尺寸、断点临界值、中间宽度区间，适合批量排查布局错位、溢出等问题
• 真实设备：重点测试核心页面（首页、转化页）的交互体验、系统级样式差异、硬件适配（比如折叠屏的展开/折叠状态、平板横屏的触摸操作），优先选用户占比高的机型（比如iPhone 13/14系列、红米Note系列、iPad）

4. 覆盖「中间宽度」布局漏洞的方法 #

中间宽度是断点之间的盲区（比如375px到768px、768px到1024px），这类场景最容易出现布局异常，可通过以下方式覆盖：

• 拖拽式测试：用浏览器开发者工具的视口拖拽功能，缓慢拖动宽度滑块，观察元素换行、溢出、错位的瞬间，重点标记临界变化点
• 关键中间值抽样：在断点之间选典型宽度测试，比如375px到768px之间测500px、640px（大屏手机/小平板），768px到1024px之间测800px、900px（安卓平板）
• 结合真实设备非标准尺寸：比如部分安卓平板的视口是800px×1280px，直接用这些设备测试中间宽度场景
• 辅助截图对比：用工具（比如Chrome的Full Page Screenshot）生成多个中间宽度的截图，快速对比布局差异，再手动验证异常点

推荐QA工作流程 #

1. 先梳理项目的CSS断点清单，明确每个断点的设计逻辑（比如移动端导航切换、内容列数从1变2）
2. 用模拟器遍历所有断点的临界值（断点前1px、断点值、断点后1px），验证布局切换是否符合设计
3. 拖拽测试中间宽度区间，标记所有布局异常（元素溢出、文字换行混乱、组件错位）
4. 用真实设备测试核心页面，重点验证交互体验和真实渲染效果
5. 测试边缘尺寸（折叠屏最小状态、超宽屏），确保布局不会崩溃
6. 记录bug时必须标注：视口宽度、设备类型、具体页面，附截图便于开发定位

内容的提问来源于stack exchange，提问作者janethra dissanayake