关于 viewports
viewports 是用于检查网页响应式布局的技能，会在指定视口尺寸渲染页面并测量溢出、文字裁切、小目标和仅悬停可见的控件。它还检查断点边缘、短屏幕对话框和文本放大，并按宽度报告问题。
主要功能
- 01在固定尺寸及断点边缘渲染页面
- 02测量横向溢出与文字裁切
- 03检查触控视口中的悬停专属控件
- 04验证短屏幕叠层内容与操作可达性
- 05在 200% 字号下检查布局并按宽度报告
适用场景
- 01布局变更后检查多个视口尺寸
- 02查找断点附近的响应式问题
- 03验证触控设备上的行操作与菜单
- 04检查横屏短视口和放大文字下的对话框
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/viewports确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
LICENSEoverflow.jsagents/openai.yaml详细介绍
视口
此技能会以一组固定的宽度和高度渲染页面，并检查每次渲染是否存在横向滚动、文本裁切、目标区域过小，以及只能通过悬停显示的控件。
每种宽度都实际渲染，不靠推断
宽度取精确值：320、375、768、1024 和 1440，以及每个项目断点上下各 1px。根据媒体查询推断出来的宽度不能算作检查结果。任何布局变更后，以及用户指定手机型号或宽度时，都要运行此检查。
打开结果属于 verify。单次渲染内的对齐属于 alignment。安全区域、点击区域和动态视口单位属于 defaults，相关失败需注明其 id。
1. 读取断点
从 CSS、Tailwind 配置或 tokens 中读取断点。将每个断点上下各 1px 的宽度加入固定宽度列表。跳过断点边界的扫描属于 viewports-cross-each-breakpoint。
2. 渲染每种宽度
通过设备模拟，在每种宽度下设置视口。使用 320×568、375×812、768×1024、1024×768 和 1440×900。断点边界的渲染高度设为 800px。在所有小于 1024 的宽度下模拟触摸操作。为每种宽度截取整页截图。根据代码判断布局属于 viewports-render-every-width。
3. 测量每次渲染
在每种宽度下，通过浏览器的 evaluate 调用运行 overflow.js。在该宽度的截图中确认结果之前，将每项结果视为待核查项。
页面不得横向滚动，但页面内的框可以滚动。在 320 宽度下横向滚动 40px 属于 viewports-no-sideways-scroll。
文本不得在没有省略号或截断样式的情况下被框裁切。在 375 宽度下，按钮标签被截掉一半属于 viewports-no-clipped-text。目标区域小于 24px 时，注明 defaults-hit-area。
4. 在触摸宽度下点击
模拟触摸操作，逐一点击页面。行操作、复制按钮和菜单若只在悬停时出现，就需要提供其他显示方式。删除按钮只在悬停行时显示，属于 viewports-no-hover-only-controls。
5. 缩短高度
渲染 812×375，即横屏握持的手机尺寸。在该尺寸下打开每个对话框、底部弹层和菜单。内容应在覆盖层内滚动，且操作按钮始终可触及。对话框中的 Save 按钮落在屏幕下方且无法滚动，属于 viewports-short-heights。
6. 将文本放大一倍
在 1024 宽度下，将根字体大小设为 200%，然后重新渲染。文本应换行，文本框应随之增大，且不得互相重叠。200% 缩放时标签与图标重叠，属于 viewports-text-zoom。因尺寸设为 px 而无法扩展的布局也使用同一 id。
7. 按宽度报告
每种宽度返回一张截图，并标注覆盖层编号，然后按相同顺序列出检查结果。未注明宽度的检查结果属于 viewports-name-the-width。
对照示例
每项检查都包含一组对照：错误写法旁边列出替代写法。
| 规则 | 错误写法 | 替代写法 |
|---|---|---|
viewports-cross-each-breakpoint | 只在 375 和 1440 下检查 | 也在 767 和 768、1023 和 1024 下检查 |
viewports-render-every-width | “网格会在 md 处折叠，所以移动端没问题” | 提供 320、375 和 768 下的截图 |
viewports-no-sideways-scroll | 在 320 宽度下使用 width: 400px 的卡片 | 为卡片设置 max-width: 100% |
viewports-no-clipped-text | overflow: hidden 在 375 宽度下裁切标签 | 标签换行，或截断并提供恢复完整内容的方式 |
viewports-no-hover-only-controls | 行操作仅通过 :hover 显示 | 在 (hover: none) 下始终显示 |
viewports-short-heights | 对话框的 Save 按钮位于 375px 高的屏幕下方 | 设置 max-height: 100dvh 并使正文可滚动 |
viewports-text-zoom | 按钮设置 height: 32px，在 200% 缩放时裁切内容 | 设置 min-height: 2rem 并添加内边距 |
viewports-name-the-width | “页眉重叠了” | “在 768 宽度下，页眉与搜索框重叠” |
报告
严重性。 HIGH 指页面出现横向滚动、仅悬停时才会显示的控件在触屏设备上无法显示，或在视口高度较小时无法触及的操作。MEDIUM 指文字被截断、文字放大到 200% 时出现重叠，或断点边缘处出现问题。LOW 指未标明宽度的发现。
格式。 每个根本原因列出一条发现，并标明宽度：
1. file:line - [rule-id] at 375, what is wrong (measured values)
如果未找到源代码行，请引用脚本中的元素。然后提供 Rule | Count | Severity 汇总。仍存在任何 HIGH 时标记为 Block，否则标记为 Approve。将无法渲染的宽度标记为 Not verified。