viewport是屏幕适配的前提和起点；未设置时移动端浏览器按980px等桌面宽度渲染，导致缩放异常；必须在<head>中静态写入<meta name="viewport" content="width=device-width, initial-scale=1.0">，且置于所有CSS/JS前。
HTML视口本身不“依赖”屏幕适配，而是**屏幕适配的前提和起点**——没设好 <meta name="viewport">，后续所有响应式手段（媒体查询、flex、grid、rem/vw）都会失效或表现异常。
为什么没加 viewport 标签，页面在手机上就变小了？
因为移动端浏览器（如 Safari、Chrome for Android）默认使用「桌面视口宽度」（通常是 980px 或 800px）渲染页面。你的设计可能是 375px 宽，但浏览器硬按 980px 渲染，再整体缩放到手机屏幕上——结果就是文字糊成一团、按钮点不准、横向滚动条出现。
这种缩放是浏览器自动做的，不是你写的 CSS 导致的。修复方式只有一条：在 <head> 里加这行：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
width=device-width告诉浏览器：“别猜了，就用设备真实的逻辑像素宽度（比如 iPhone 15 是 393px）” -
initial-scale=1.0确保不缩放，让 1px CSS 像素对齐设备独立像素（DIP），字体和边框才不会发虚 - 这行必须放在所有
<link rel="stylesheet">和<script>之前，否则样式可能先按错误视口计算再重排，造成闪动
viewport 设置后，CSS 单位行为为什么会变？
视口一设，vw、vh、rem 才真正“有据可依”。比如：
立即学习“前端免费学习笔记（深入）”；
-
100vw就等于当前视口宽度（不是屏幕物理像素，也不是 document.body.scrollWidth） -
1rem的基准值（html的font-size）若设为37.5px，前提是已知设备宽度为 375px —— 这个“375px”正是width=device-width提供的逻辑宽度 - 没设 viewport 时，
100vw可能是 980px，1rem的计算基准也错乱，导致布局比例全崩
注意：document.documentElement.clientWidth 返回的就是这个 viewport 宽度（单位：CSS 像素），它不受用户双指缩放影响——这是判断当前有效布局宽度的可靠依据，不是 window.innerWidth（含滚动条，且缩放时会变）。
maximum-scale=1.0 或 user-scalable=no 为什么现在不推荐？
这类限制看似“防止用户乱缩放”，实则违反 WCAG 2.1 可访问性标准。真实问题不是“用户缩放”，而是“缩放后内容被裁切或功能不可用”——这说明你的响应式没做完整，不该靠禁用缩放掩盖缺陷。
-
user-scalable=no在 iOS 上已基本失效（Safari 17+ 忽略该指令），安卓 Chrome 也逐步弱化支持 -
maximum-scale=1.0会让视力障碍用户无法放大阅读，测试工具（如 axe、Lighthouse）直接标为「严重可访问性问题」 - 正确做法：用
@media (min-width: ...)+clamp()+line-height弹性控制，确保 200% 缩放后仍可读、可操作
最容易被忽略的一点：viewport 标签只在首次加载时生效；如果 JS 动态插入或修改它，大多数浏览器会忽略。所以务必写死在 HTML 源码的 <head> 里，且不能被构建工具（如 Webpack 的 html-webpack-plugin）意外删掉或包裹进条件注释中。
