viewport标签是屏幕适配的必要开关，必须置于head最前并配置width=device-width,initial-scale=1.0；user-scalable=no和maximum-scale=1.0慎用；CSS单位推荐rem+媒体查询或vw/vh，需结合场景选择。
viewport 标签本身不能“解决”屏幕适配，它只是启动适配的必要开关。没有它，后续所有 CSS 响应式手段（rem、@media、flex）都会在移动端失效或表现异常。
为什么只加 width=device-width 会出问题
常见错误是只写 <meta name="viewport" content="width=device-width">，漏掉 initial-scale=1.0。这会导致：
- iOS Safari 在某些机型上默认放大 1.25 倍，文字糊成一团
- 部分 Android 浏览器直接忽略缩放控制，视口宽度计算错乱
- PC 浏览器模拟移动设备时，
document.documentElement.clientWidth返回值不稳定，JS 适配逻辑崩坏
必须成对出现：width=device-width, initial-scale=1.0 是底线配置，缺一不可。
user-scalable=no 和 maximum-scale=1.0 要慎用
这两个参数看似能“锁死布局”，实则埋下兼容性雷：
立即学习“前端免费学习笔记（深入）”；
-
user-scalable=no会禁用双指缩放，对视力障碍用户不友好，WCAG 2.1 明确不推荐 - 某些安卓定制浏览器（如华为 EMUI 内置浏览器）会完全无视
maximum-scale，但依然执行user-scalable=no，导致页面无法放大查看 - 横屏切换时，iOS Safari 可能不触发
resize事件，若 JS 依赖缩放状态更新html字体大小，就会卡在旧值上
真实项目中，除非是 Kiosk 模式或车载 H5，否则建议去掉这两项。
视口设置后，CSS 单位选 rem 还是 vw
两者适用场景不同，混用反而增加复杂度：
-
rem适合字体、边距等需随根字号线性缩放的元素，但必须配合 JS 动态设置document.documentElement.style.fontSize，且要注意 iOS Safariorientationchange不触发resize的坑 -
vw适合全屏背景、大标题、固定比例容器（如width: 80vw），但小屏下易导致文字过小，需用@media加兜底最小字号 -
px在高 DPR 屏幕（如 iPhone 14 Pro）上会模糊，em在深层嵌套时计算链太长，都不推荐作为主单位
简单项目用 rem + 媒体查询 更稳；大屏数据看板类用 vw/vh 更直接；但无论哪种，都得先确保 viewport 正确生效。
真正容易被忽略的是：视口配置必须放在 <head> 最前面，且早于任何 CSS 和 JS 加载。如果被第三方脚本或内联样式阻塞，首屏渲染时浏览器已按默认视口（980px）开始布局，后面再补 meta 也来不及回滚。
