在此运行 完全在你的浏览器里运行，不上传、不登录
Viewport Meta 生成
用宽度、缩放上下限、user-scalable 与 viewport-fit 组装 viewport meta 标签。
预设
生成的标签
禁用缩放会损害无障碍 —— WCAG 1.4.4 要求文本可放大到 200%。只有在确有必要时才用「禁用缩放」预设。
怎么用
- 设宽度 —— 响应式布局用
device-width，固定宽度的页面填像素值。 - 设初始缩放，通常填 1；比 1 大表示首屏就是放大的。
- 勾选最小缩放或最大缩放才会把这两项写进标签，数值填在旁边的输入框里。
- 选允许用户缩放和视口填充，或者保持「自动（省略）」，让它们不出现在标签里。
- 点一个预设会填满整个表单，然后复制生成的标签。
四组预设覆盖移动优先、禁用缩放、平板适配与刘海屏安全区。预设只是把值写回表单再走同一条生成路径，所以之后照样可以微调。
常见用法
- 起一个响应式页面 —— 移动优先预设产出的正是大多数布局需要的那一条，且不多写。
- 适配刘海屏 ——
viewport-fit=cover加上 CSS 里的安全区内边距，内容就不会被挖孔挡住。 - 排查缩放问题 —— 用户反馈不能双指放大时，先看标签里有没有
user-scalable=no或maximum-scale=1。 - 对比配置差异 —— 在预设之间切换，能直接看出 content 串里哪些 token 变了。
常见问题
问：禁用缩放到底该不该用？
答：极少该用。WCAG 1.4.4 要求文本能放大到 200%，而双指缩放是很多人读小字的唯一办法。除非某个具体组件（比如地图）确实需要，否则别写 user-scalable。
问：CSS 已经响应式了，还需要这个标签吗？ 答：需要。没有它，移动浏览器会按 980 px 左右的桌面宽度渲染再整体缩小，于是你的媒体查询永远匹配不到真实设备宽度。
问：viewport-fit=cover 做了什么？
答：它允许页面画到圆角和挖孔区域下面。之后你需要在 CSS 里用 env(safe-area-inset-*) 补内边距，保证可交互内容点得到。
你的数据留在这台设备上
Viewport Meta 生成 完全在本地运行。你粘贴或拖入的一切都由你自己的浏览器处理，不会被传走。我们的服务器不保存任何东西——关掉标签页就没了。
你输入的内容不会发往服务器、不被记录，也不用于分析统计。首次加载之后即使断网，这个页面照样能用。