移动端页面不缩放、文字太小、布局错乱，根本原因是 viewport meta 标签缺失或配置错误；必须置于 <head> 最前面，最简有效写法是 <meta name="viewport" content="width=device-width, initial-scale=1.0">。
移动端页面不缩放、文字太小、布局错乱，基本都是 viewport 设置没写对，或根本没写。
viewport meta 标签该写在哪、怎么写
必须放在 <head> 内，且越靠前越好（浏览器解析到就立即生效）。最简可用配置是：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这行代码告诉浏览器：页面宽度按设备屏幕宽度来，初始缩放为 1 倍。缺了它，桌面版 HTML 在手机上会默认以 980px 宽度渲染，再整体缩小显示，导致文字糊、按钮难点。
- 不要写成
width=1200或其他固定值，否则在小屏上强制拉伸，在大屏上留白 -
initial-scale=1.0和width=device-width要配对出现；只写一个可能被忽略 - iOS Safari 对
user-scalable=no的支持已弱化，加了也不一定禁用双指缩放，别依赖它做“防误触”
哪些参数真有用、哪些该删掉
常见参数里，只有少数几个有实际意义，其余多数是过时或无效的：
立即学习“前端免费学习笔记（深入）”；
-
width=device-width—— 必须有，适配的基础 -
initial-scale=1.0—— 必须有，避免 iOS 自动缩放 -
maximum-scale=1.0和minimum-scale=1.0—— 可选，但会影响可访问性（视障用户需要放大），上线前确认是否真有必要 -
user-scalable=no—— 现代 iOS 已基本无视，Android 行为不一致，建议删掉 -
shrink-to-fit=yes—— 仅旧版 Safari 支持，新版已废弃，写了白写
错误示例：<meta name="viewport" content="width=375, initial-scale=1, user-scalable=no"> —— 固定 width 导致 iPad 上内容被压缩，user-scalable=no 在很多机型上无效。
为什么加了 viewport 还是不正常
常见原因不是标签写错了，而是被其他逻辑覆盖或干扰：
- CSS 里写了
html { zoom: 0.8; }或transform: scale()，会和 viewport 缩放冲突 - 某些 UI 框架（如老版本 Bootstrap）自带 viewport meta，和你写的重复，造成不可预期行为
- 页面嵌在 WebView 中（比如微信、App 内），宿主可能强制重写 viewport，这时需联系客户端加白名单或改用 JS 动态注入
- Chrome DevTools 模拟器有时缓存 viewport 状态，切设备后要硬刷新（
Ctrl+Shift+R）
调试技巧：在控制台执行 document.querySelector('meta[name="viewport"]')，看取到的 content 值是不是你写的那个。
viewport 不是万能胶，它只管“初始渲染尺寸”，后续响应式靠 CSS 媒体查询和弹性布局撑住；很多人卡在第一步，却花半天调 @media (max-width: 768px)，其实问题早就在 <meta> 标签里了。
