用途:在 UI 改动后,验证应用在标准断点下显示是否正常。
测试视口:Mobile (small) 375px、Mobile (large) 428px、Tablet 768px(md:)、Desktop 1280px(xl:)、Ultrawide 1536px(2xl:)。
工作流:先用 browser_navigate 打开目标 URL(通常为 http://localhost:3000 或开发服务器地址);对每个视口调整尺寸或用 browser_snapshot 检查布局,再用 browser_take_screenshot 截图,并通过 browser_snapshot 查看 aria 树,检查内容溢出或被遮挡、导航是否应折叠为汉堡菜单、文字过小、按钮/链接间距过近(触控目标问题)、不应出现的横向滚动条。
常见断裂检查:溢出(元素宽于视口导致横向滚动)、折叠布局(flex/grid 项在移动端应堆叠却未堆叠)、隐藏内容(某些尺寸下无菜单开关即消失)、字体缩放(桌面可读但移动端过小)、固定定位(模态、toast、粘性头部在小屏断裂)、图片(过大图片未缩小)。
报告格式示例: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。修复问题后重新测试受影响的视口。
限制:资料未提供安装命令、收费、平台支持范围等细节。