粘贴 HTML,检查 viewport
把页面 HTML 粘到下面,工具在浏览器本地检查 viewport 是否存在、width=device-width、initial-scale、user-scalable 与 maximum-scale。不联网、不上传,结果可导出 CSV。
尚未检查。
内置自检运行中…
判定口径
| 指标 | 判定 | 边界 |
|---|---|---|
| viewport 数量 | 解析所有 meta name=viewport | 0 个记缺失,多个记重复 |
| width | 是否为 device-width | 固定数值(如 1024)单独记问题 |
| initial-scale | 是否存在 | 不判断是否等于 1 |
| 禁止缩放 | user-scalable=no/0 或 maximum-scale≤1 | 与移动视口 pilot 同口径 |
| viewport-fit | 是否 cover | 只记录,不判好坏 |
| 不判断 | CSS 布局、横向溢出、字号、真机缩放 | 只读 meta 字符串 |
解析器在 js/viewport-check.js,Node 断言在 scripts/test_viewport_check.js(14 项);页面内置 3 项自检。
为什么先查 viewport
站内移动视口 pilot里,61 个页面中 54 个禁止缩放、4 个首页没有 viewport;声明错误会直接影响后续字号、触控与对比度验收。可继续参考390px 字号审计与触控审计。
隐私
解析在本页完成,没有网络请求;导出的 CSV 只含声明键值与问题。带 #sample 打开会自动填入示例。
常见问题
工具会上传 HTML 吗?
不会。解析全部在浏览器里完成,没有网络请求;内容不会保存或发送。
什么样的 viewport 算合格?
常见底线是 width=device-width, initial-scale=1,并且不用 user-scalable=no/0 或 maximum-scale=1 锁住缩放;是否加 viewport-fit=cover 取决于刘海屏设计。
为什么 maximum-scale=1 也算禁止缩放?
它把用户可放大的上限锁在 1 倍,双指缩放无法放大正文;与 user-scalable=no 的可访问性后果相同。
没有 viewport 会怎样?
手机通常按桌面宽度渲染再整体缩小,正文会变小;站内移动视口 pilot 里 4 个首页没有 viewport。
支持多个 viewport 或属性顺序不同吗?
支持。工具解析所有 meta,多个 viewport 会报重复;单双引号、大小写与 name/content 顺序都能识别。
能替代真机吗?
不能。工具只读 meta 字符串,不判断 CSS 布局、横向溢出、字体大小或真机缩放行为。