html5 页面在手机上正常显示必须配置 viewport meta 标签：width=device-width、initial-scale=1、user-scalable=yes 三者缺一不可；禁用 maximum-scale 和 minimum-scale；异形屏需加 viewport-fit=cover。
要让 HTML5 页面在手机上正常显示、文字清晰、布局不缩成一团，viewport meta 标签必须配对——它不是锦上添花，而是浏览器渲染的“启动开关”。配错这一行，后面所有 CSS 都可能失效。
核心参数一个都不能少
最简、最稳、最推荐的写法只有一行，且必须放在 最前面：
- width=device-width：让布局视口宽度实时匹配设备逻辑像素（如 iPhone 15 竖屏是 393px，横屏自动变成 852px），不是写死 375 或 320；
- initial-scale=1：确保页面加载时以 1:1 比例渲染，避免 iOS Safari 对小字号内容自动放大，导致文字模糊、点击错位；
- user-scalable=yes：显式开启双指缩放，保障视力障碍用户、老年用户可访问，也是 WCAG 2.1 合规的基本要求。
这三项缺一不可。只写 width=device-width，某些安卓 WebView 可能忽略缩放逻辑；只写 initial-scale=1，iOS 仍可能按 980px 渲染再缩小，布局全乱。
坚决不要加 maximum-scale 和 minimum-scale
这两个参数在 2026 年已属于高危配置：
- maximum-scale=1 会直接屏蔽用户主动放大，也使系统「更大字体」辅助功能失效，文字被截断、按钮点不到；
- iOS 16.4+ 和多数安卓 WebView 已部分或完全忽略它们，不同机型表现不一致，调试成本高；
- 除非是自助终端、车载仪表盘等封闭场景，否则一律禁用。
特殊屏幕要加 viewport-fit=cover
针对 iPhone 刘海屏、挖孔屏等异形屏，需额外加上：
- viewport-fit=cover：让页面内容真正伸展到屏幕边缘；
- 但它必须和 width=device-width、initial-scale=1 共存才生效，缺一个，CSS 中的 env(safe-area-inset-top) 就返回 0px，导致顶部留白或底部被遮挡。
别忘了 viewport 只是第一步
meta 标签只决定“浏览器用多宽来画页面”，真正的适配还要靠后续配合：
- CSS 使用 rem/em、max-width: 100%、object-fit: contain；
- 媒体查询断点基于真实逻辑宽度（非设计稿 375）；
- 图片用 srcset + sizes，表单控件设 min-height: 44px、font-size ≥ 16px；
- 避免多个 viewport 标签共存——浏览器只认最后一个，务必检查 document.querySelector('meta[name="viewport"]').content 是否符合预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
