粘贴 HTML,检查 viewport

把页面 HTML 粘到下面,工具在浏览器本地检查 viewport 是否存在、width=device-width、initial-scale、user-scalable 与 maximum-scale。不联网、不上传,结果可导出 CSV。

尚未检查。

内置自检运行中…

判定口径

指标判定边界
viewport 数量解析所有 meta name=viewport0 个记缺失,多个记重复
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 布局、横向溢出、字体大小或真机缩放行为。

关于作者

凌壹信息Official(交付团队),负责企业网站、品牌与智能制造项目的需求梳理、方案与验收协作。本文工具只解析静态 HTML 的 viewport meta,不构建 DOM、不执行脚本、不判断真机行为。

先声明,再排版

viewport 决定手机按什么宽度渲染;声明错了,后面的字号、触控与对比度都会被放大。

预约内容验收方案