分类: 开发工具
Viewport Meta 生成器
生成响应式视口 meta 标签并了解各选项含义
设置页面视口 meta 标签的宽度、初始缩放比例、缩放范围、双指缩放权限和 viewport-fit，并附有每个选项的简要说明，然后将生成的标签复制到 <head> 中。完全在浏览器本地生成。
关闭此项会阻止双指缩放，影响可访问性——大多数网站应保持开启。
Meta 标签
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
本页的所有处理都在浏览器中完成，不会上传任何内容。
这个工具能做什么
viewport meta 标签告诉移动端浏览器如何调整页面尺寸和缩放——如果没有它，手机会以固定的类桌面宽度渲染页面并自动缩小，这也是移动友好性检测工具最先检查的项目之一。设置 width=device-width 和 initial-scale=1 就能覆盖大多数常见情况，但缩放范围和 viewport-fit 选项值得真正理解，而不是盲目照抄，因为完全禁用缩放会给低视力用户带来可访问性问题。
使用方法
- 除非有特殊需要，否则将 width 保持为 "device-width"。
- 设置初始缩放比例，并可选设置最小/最大缩放范围。
- 决定是否允许双指缩放——建议保持开启。
- 如果设计需要延伸到刘海屏或安全区域，请选择合适的 viewport-fit 值。
- 将生成的标签复制到页面的 <head> 中。
隐私说明
本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。
常见问题
- 为了避免"误触"缩放，应该禁用 user-scalable 吗？
- 通常不应该——禁用双指缩放会导致低视力访客无法放大阅读你的内容，这违反了可访问性准则（WCAG 1.4.4）。应该修复布局问题，而不是禁用缩放。
- viewport-fit=cover 具体有什么作用？
- 在带有刘海屏或圆角的设备上，它可以让页面背景延伸到这些安全区域内，而不是留下一条黑边；同时你可以使用 env(safe-area-inset-*) 这类 CSS 函数，让内容本身避开刘海区域。
- width=device-width 总是正确的吗？
- 对绝大多数响应式网站来说是的——它让 CSS 视口与设备的自然宽度一致，使响应式断点表现符合预期。