Codex可自动发现并修复H5横向滚动条：先用Browser切换iPhone SE视口，再通过Cmd+Shift+A高亮溢出元素或Console比对getComputedStyle(document.body).width与window.innerWidth差值，最后在CSS中为html设overflow-x:hidden、重置img/video/svg/max-width及body margin。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要在 Codex 中自动发现并修复 H5 页面在手机宽度下出现横向滚动条的问题，而不是靠肉眼反复缩放、手动 inspect 逐个排查哪个元素偷偷撑宽了视口。
确认当前页面是否真有横向溢出
打开 Codex 桌面 App → 在左侧项目面板中选中你的前端项目（确保已运行本地服务，如 http://localhost:5173）→ 点击底部「Browser」标签页 → 输入 /browse http://localhost:5173 → 回车加载页面。
等待右上角显示绿色“Ready”后，点击 Browser 窗口右上角「⚙️」→「Viewport」→ 选择 iPhone SE (375×667)；此时若页面底部出现横向滚动条，或右侧边缘有内容被截断，说明溢出已真实存在。
注意：这一步必须在启用 Browser Use 插件后进行，否则内置浏览器无法加载本地服务；插件首次启用需等待约 8 秒初始化，未完成前所有 /browse 命令均无响应。
用内置工具快速定位撑宽源
方法一：视觉高亮法（最快）
在 Browser 界面中，按 Cmd+Shift+A（Mac）或 Ctrl+Shift+A（Win） 激活高级批注模式 → 鼠标圈选 body 区域 → 右键选择「Highlight overflow source」→ Codex 将自动为所有 width > 375px 的直接子元素添加红色 outline，并在侧边栏列出具体元素路径与计算宽度值。
方法二：控制台验证法（最准）
保持 Browser 窗口打开 → 点击右上角「?」→ 选择「Open DevTools」→ 切换到 Console 标签 → 输入：getComputedStyle(document.body).width → 回车；若返回值如 "382px"，再输入 window.innerWidth → 对比差值；【差值 > 1px 即表示存在隐藏撑开源】。
通过 codex-reset-radar.pages.dev 监控 Codex 使用重置窗口。轮询 current.json，检测窗口开启/关闭、预测等级变化以及概率跳变。
执行三步修复并验证
第一步：给根容器加真正生效的裁剪
在项目中找到全局 CSS 文件（如 main.css 或 globals.css），在最顶部插入：html { overflow-x: hidden; }。这一步必须写在 html 上，写在 body 上对 iOS Safari 无效。
第二步：重置常见撑宽元凶
在同一 CSS 文件中追加以下规则：
img, video, iframe, svg { max-width: 100%; height: auto; }<br>body { margin: 0; }<br>input[type="number"] { width: 100%; box-sizing: border-box; }
。其中 【svg 必须加 max-width: 100%】，否则内联 SVG 容易撑破容器。
第三步：验证修复效果
保存 CSS 文件 → Codex 会自动触发热更新 → Browser 窗口刷新 → 再次切换至 iPhone SE 视口 → 滚动到底部确认横向滚动条消失 → 若仍有溢出，回到「Highlight overflow source」重新扫描，重点检查 ::before/::after 伪元素或 transform: translateX() 脱离文档流的元素。
