不加 meta viewport 时页面缩成一团，是因为移动端浏览器默认将 layout viewport 设为 980px（或1024px），远大于手机屏幕逻辑像素宽度（如 iPhone 12 为428px），浏览器被迫将整个980px页面压缩进小屏幕显示，导致文字极小、按钮难点击、需双击放大；这是为兼容旧网页的历史策略，却破坏现代响应式布局基础。
不加 meta viewport 时页面为什么缩成一团？
因为移动端浏览器默认把 layout viewport 设为 980px（或 1024px），远大于手机屏幕的逻辑像素宽度（如 iPhone 12 是 428px）。浏览器会把整个 980px 宽的页面“压缩”进 428px 屏幕里显示，导致文字极小、按钮难点、必须双击放大才能阅读。
这不是 bug，是历史兼容策略：为了让没做移动端适配的老网页也能在手机上“完整显示”。但对现代响应式页面来说，这直接破坏了布局基础。
-
width=device-width强制 layout viewport 等于设备逻辑像素宽度（比如428px），让 CSS 布局有正确参照系 - 只写
initial-scale=1.0而不写width=device-width，某些安卓 WebView 可能忽略缩放设置 - 部分低端安卓机型不支持
width设为具体数值（如width=375），但device-width全平台兼容
为什么 initial-scale=1.0 必须和 width=device-width 搭配？
initial-scale 的实际效果依赖 layout viewport 宽度。它的计算逻辑是：initial-scale = 设备逻辑像素宽度 / layout viewport 宽度。如果 layout viewport 还是默认的 980px，那 initial-scale=1.0 就等于把 980px 内容等比铺满屏幕——结果还是缩小。
只有先用 width=device-width 把 layout viewport 收到 428px，initial-scale=1.0 才真正意味着“1 CSS 像素 = 1 逻辑像素”，字体、间距、容器尺寸才按设计稿预期渲染。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 单独写
initial-scale=1.0在 iOS Safari 中可能生效，但在很多安卓原生浏览器中会被静默忽略 -
initial-scale=1.0不等于“禁止缩放”，它只控制首次加载时的缩放值；用户仍可双指缩放（除非加user-scalable=no） - 若页面存在横向滚动（比如未处理的宽表格），
initial-scale=1.0可能被浏览器自动降级以避免裁剪，导致实际缩放 ≠ 1
maximum-scale=1.0 和 user-scalable=no 到底有没有用？
这两个参数意图明确：禁用用户缩放。但现实是——它们在现代浏览器中已基本失效或行为不一致。
iOS Safari 自 iOS 10 起就无视 maximum-scale 和 minimum-scale；Android Chrome 从 2021 年起也逐步废弃支持；user-scalable=no 虽仍被识别，但仅影响双指手势，无法阻止用户通过系统辅助功能（如“放大手势”）强制缩放。
- WCAG 2.1 明确要求：禁止用户缩放违反可访问性原则，多数合规项目已弃用这些参数
- 真要防误操作，可用
touch-action: manipulation降低非预期缩放触发概率，但不替代语义化缩放控制 - 如果业务强依赖固定尺寸（如 Canvas 渲染、WebGL 场景），应监听
visualViewportresize 事件动态重绘，而非依赖 meta 锁死
viewport-fit=cover 是为了解决什么具体问题？
它专治刘海屏、挖孔屏、曲面屏的“安全区域”问题。不加时，body 默认只渲染到屏幕顶部状态栏下方，底部可能被圆角或 Home Indicator 遮挡，形成难看的黑边或内容截断。
viewport-fit=cover 告诉浏览器：“把页面内容撑满物理屏幕，别留白”，再配合 env(safe-area-inset-*) CSS 函数（如 padding-bottom: env(safe-area-inset-bottom)），就能精准避开异形屏禁区。
- 仅 iOS 11+ 和部分 Android 10+ WebView 支持，老版本会忽略该属性，无副作用
- 必须与
width=device-width同时使用，否则cover无意义 - 若页面含固定定位的底部操作栏，漏掉
env(safe-area-inset-bottom)补白，会导致按钮被 Home Indicator 盖住，用户点不到
真正关键的不是参数堆砌，而是理解 layout viewport 如何成为 CSS 布局的“标尺”。一旦这个标尺错位，所有 rem/vw/flex 布局都会漂移。很多人调了半天 vw 单位却仍有 1px 偏差，根源常在这里。
