codex 可自动检查 h5 页面在 375px 下的布局合规性:通过 browser use 插件加载本地服务,设置 iphone se 视口,截图存为基准图;支持批注分析、/goal 全页扫描、表格报告三种检查方式;修复后比对基准图并自动提交通过结果。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

你需要在 Codex 中自动检查一个 H5 页面是否在 375px 宽度下按钮不溢出、表单间距统一、所有元素完整可见,而不是靠人眼反复缩放浏览器窗口去肉眼判断。
启用 Browser Use 插件并加载本地页面
打开 Codex IDE → 点击右下角插件图标 → 在搜索框输入 Browser Use → 点击启用(首次启用需等待约 8 秒初始化)。
确保你的项目根目录下有可访问的本地服务,例如运行着 npm run dev 的 Vite 项目,默认地址为 http://localhost:5173;若无服务,Browser Use 将无法加载页面内容,后续所有检查均失效。
在 Codex 指令栏输入:/browse http://localhost:5173 → 回车执行 → 等待内置浏览器加载完成,右上角显示绿色“Ready”状态。
设置 375px 视口并触发截图比对
在 Browser Use 浏览器窗口中,点击右上角「⚙️」→「Viewport」→ 选择 iPhone SE (375×667);该预设已强制设置 width=device-width, initial-scale=1.0,且禁用用户缩放,真实模拟理想视图。
此时若页面出现横向滚动条或元素被截断,Browser Use 会自动高亮溢出区域——这是唯一能直接暴露布局缺陷的视觉反馈,比手动 inspect 更快定位问题。
点击右上角「?」截图 → 选择「Save as reference image」→ 命名为 375px-layout-baseline.png;此图将作为后续自动化比对的基准,【不可覆盖重命名】,否则历史比对失效。
执行自动布局合规性检查
方法一:使用内置批注模式快速识别溢出
通过本地 Codex 或 OpenClaw OAuth 凭证直接调用 ChatGPT/Codex Responses 的 image_generation 工具来生成或编辑光栅图像,然后保存
在 Browser Use 界面中,按 Cmd+Shift+A(Mac)或 Ctrl+Shift+A(Win)激活高级批注模式 → 用鼠标圈选疑似溢出的按钮或表单区块 → 右键选择「Analyze layout overflow」→ Codex 将返回具体 CSS 属性(如 width: 400px)、父容器宽度(375px)及建议修正值(max-width: 100%)。
方法二:调用 /goal 模式执行全页扫描
在指令栏输入:/goal Check mobile layout at 375px width → 按回车后,Codex 会自动执行以下操作:
① 切换 viewport 至 375px;
② 遍历所有 button、input、select 元素,计算其 offsetWidth 是否 > 375;
③ 扫描所有 form > * 直接子元素的 margin 和 padding,标记相邻元素间距差值 > 8px 的异常组合;
④ 输出含行号的违规 CSS 文件路径(如 src/components/AuthForm.tsx:42)。
方法三:用 Browser Use + Spreadsheets 插件生成检查报告
先启用 Spreadsheets 插件 → 输入指令:/spreadsheet create "375px Layout Audit" → 再执行:/browse http://localhost:5173 → /analyze layout → /export to spreadsheet;生成的表格含四列:元素类型、CSS 路径、宽度状态(✅/❌)、修复建议。该表格可直接发给前端同事复核。
验证修复效果并锁定结果
修改代码后,重新运行本地服务 → 在 Browser Use 中刷新页面 → 点击「?」→ 选择「Compare with reference」→ 选择刚才保存的 375px-layout-baseline.png。
Codex 会逐像素比对,仅高亮差异区域,并标注「Layout stabilized」或「Still overflow detected」;若提示前者,说明本次修改已通过 375px 布局验收。
最后,在指令栏输入:/commit layout-check-passed → Codex 将自动在当前 Git 分支创建 commit,消息为 [layout] Pass 375px mobile viewport check,并跳过 CI 中重复的视觉测试任务。










