开发工具 125文本工具 40编码加密 40图片文件 66查询工具 46计算转换 57站长工具 57生活工具 55娱乐工具 39金融理财 45
首页/站长工具/viewport 与移动端适配检查

viewport 与移动端适配检查

手机打开网站「字小得要放大还放不全」,九成是缺了 viewport 标签。这个工具生成正确的 viewport 标签,并附上一份能直接照着做的移动端自查清单。

本地运行 · 数据不上传 站长工具 免费 · 无需注册
响应式页面固定写 device-width,别写具体像素
viewport 标签与自查清单
点上方「生成」按钮开始

使用说明

  1. 一般情况直接用默认值,点「生成」拿到标准 viewport 标签。
  2. 如果页面要适配 iPhone 刘海屏(内容延伸到顶部状态栏),勾上 viewport-fit=cover。
  3. 按清单逐项自查,最常见的两个问题是漏 viewport 和正文小于 16px(手机上会自动缩放)。
  4. 改完用 Chrome 的 F12 → 设备模拟器实测,或用真机打开看。

常见问题

为什么不能加 maximum-scale=1?
它会禁止用户双指缩放。对视力不佳的访客是硬伤,WCAG 无障碍标准也不推荐。除非有非常明确的理由,别加。
viewport-fit=cover 加了还要做什么?
还要配合 CSS 的 env(safe-area-inset-*) 来给刘海和底部横条留出安全距离,只加标签不写 CSS 反而会让内容被挡住。
桌面端页面加 viewport 有影响吗?
没有影响。viewport 只在移动端浏览器生效,桌面浏览器直接忽略。

相关工具

站长工具 · 该分类共 57 个工具,展开查看全部