小丫设计工具站
返回工具合集
Viewport Meta标签在线生成器
可视化配置网页视口参数,一键生成移动端适配meta viewport标签代码
参数预设模板,一键快速填充配置
标准响应式网站
固定宽度网页
禁止页面缩放
PWA应用页面
基础视口参数
页面宽度
device-width
自定义数值
自定义宽度值
初始缩放比例
缩放区间限制
最小缩放比例
最大缩放比例
允许用户缩放页面
iOS视口适配选项
viewport-fit设置
不配置
auto
contain
cover
附加视口设置
页面高度
不设置
device-height
生成完成的Meta Viewport标签(点击复制代码)
💡 使用提示:
点击代码区域即可一键复制标签源码。常规响应式网页开发,推荐使用 width=device-width, initial-scale=1.0 基础配置;PWA移动端网页可以开启viewport-fit=cover适配刘海屏。
工具说明
Viewport Meta标签在线生成工具,专门面向前端网页开发者快速制作移动端视口配置代码。
网页添加viewport meta标签可以控制手机浏览器页面的渲染视口,解决移动端网页布局错乱、页面缩放异常、宽度适配失效等常见问题。
支持自定义视口宽度、初始缩放、最大最小缩放倍数、是否允许用户双指缩放。
同时支持iOS浏览器专属viewport-fit参数,适配刘海屏、挖孔屏页面布局。
内置4套常用预设模板,适合普通响应式网站、固定宽度H5页面、禁止缩放活动页、PWA渐进式网页应用。
所有计算逻辑全部在本地浏览器运行,不会上传你的配置信息到服务器,安全无数据泄露。
适用场景:H5活动页面开发、移动端官网制作、PWA应用开发、网页移动端兼容性调试、前端学习练习。
快速生成标准meta视口代码,减少手动手写代码出错概率。
© 2026 小丫设计工具站 版权所有
皖ICP备2026013248号-4
本站工具仅供学习使用,请勿用于商业侵权用途
操作完成