responsive-testing

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Responsive Testing

响应式测试

After a UI change, verify the app looks correct at all standard breakpoints.

在UI变更后，验证应用在所有标准断点下显示正常。

Viewports to Test

待测试视口

Name	Width	Tailwind
Mobile (small)	375px	default
Mobile (large)	428px	default
Tablet	768px	`md:`
Desktop	1280px	`xl:`
Ultrawide	1536px	`2xl:`

名称	宽度	Tailwind
小屏移动端	375px	default
大屏移动端	428px	default
平板	768px	`md:`
桌面端	1280px	`xl:`
超宽屏	1536px	`2xl:`

Workflow

工作流程

1. Navigate to the Page

1. 导航至目标页面

Use

browser_navigate

to open the target URL (usually

http://localhost:3000

or whatever the dev server is running on).

使用

browser_navigate

打开目标URL（通常为

http://localhost:3000

或开发服务器运行的其他地址）。

2. Test Each Viewport

2. 测试每个视口

For each viewport size:

Resize the viewport using
```
browser_navigate
```
with viewport parameters, or use
```
browser_snapshot
```
to inspect the layout
Take a screenshot with
```
browser_take_screenshot
```
Check
```
browser_snapshot
```
for the aria tree — look for:
- Content overflowing or hidden behind other elements
- Navigation that should collapse into a hamburger menu
- Text that's too small to read
- Buttons/links too close together (touch target issues)
- Horizontal scrollbars that shouldn't exist

针对每个视口尺寸：

使用带视口参数的
```
browser_navigate
```
调整视口大小，或使用
```
browser_snapshot
```
检查布局
使用
```
browser_take_screenshot
```
截取屏幕截图
检查
```
browser_snapshot
```
中的aria树——留意以下问题：
- 内容溢出或被其他元素遮挡
- 应折叠为汉堡菜单的导航栏未折叠
- 文本过小难以阅读
- 按钮/链接间距过近（触摸目标问题）
- 出现不应存在的水平滚动条

3. Check for Common Breakage

3. 检查常见布局损坏问题

Overflow: Elements wider than the viewport causing horizontal scroll
Collapsed layout: Flex/grid items that should stack on mobile but don't
Hidden content: Elements that disappear at certain sizes without a menu toggle
Font scaling: Text that's readable on desktop but tiny on mobile
Fixed positioning: Modals, toasts, or sticky headers that break on small screens
Images: Oversized images that don't scale down

溢出：元素宽度超过视口导致水平滚动
布局未折叠：在移动端应堆叠的Flex/Grid元素未堆叠
内容隐藏：在特定尺寸下消失且无菜单切换的元素
字体缩放：在桌面端可读但在移动端过小的文本
固定定位：在小屏幕上失效的模态框、提示框或粘性页眉
图片：未按比例缩小的超大尺寸图片

4. Report

4. 测试报告

Responsive Test Results:
  375px (mobile):  PASS — layout stacks correctly
  428px (mobile):  PASS
  768px (tablet):  WARN — nav items overlap, need hamburger menu
  1280px (desktop): PASS
  1536px (ultrawide): WARN — content not centered, stretched too wide

Fix any issues found, then re-test the affected viewports.

Responsive Test Results:
  375px (mobile):  PASS — layout stacks correctly
  428px (mobile):  PASS
  768px (tablet):  WARN — nav items overlap, need hamburger menu
  1280px (desktop): PASS
  1536px (ultrawide): WARN — content not centered, stretched too wide

修复所有发现的问题，然后重新测试受影响的视口。