必须写，否则ios safari横屏或刘海屏下页面被系统ui裁切；需配合env(safe-area-inset-*)变量与css fallback（如max(12px, env(...))）实现安全区域适配。
viewport meta 标签的 width=device-width 是基础但不够
只写 <meta name="viewport" content="width=device-width"> 会导致 iOS Safari 在横屏或某些刘海屏下把页面“撑开”，封面图顶部/底部被系统 UI（如状态栏、Home Indicator）裁掉。这不是 CSS 能单独解决的问题，必须配合 viewport 的安全区域声明。
- 必须加上
initial-scale=1.0，否则部分 Android 浏览器会默认缩放 - 推荐完整写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> -
viewport-fit=cover是关键——它告诉浏览器“允许内容延伸到屏幕边缘”，后续才能用 CSS 安全区域变量做裁剪控制 - 不加
viewport-fit=cover，env(safe-area-inset-*)变量在 iOS 上始终为 0
用 env(safe-area-inset-*) 做动态内边距适配
CSS 中的 env(safe-area-inset-top) 等变量，是浏览器注入的运行时值，代表系统 UI 占用的像素高度。它不是固定常量，不同设备、不同方向、甚至不同系统版本都可能不同。
- 常见错误：直接写
padding-top: env(safe-area-inset-top);—— 如果变量未定义（如旧版 Android），整个声明会被忽略，导致顶部无留白 - 正确做法：用
padding-top: max(12px, env(safe-area-inset-top));或padding-top: calc(12px + env(safe-area-inset-top)); - 封面类容器建议用
padding而非margin，避免外边距合并干扰布局流 - 仅对需要避开系统 UI 的区域设置，比如封面标题、按钮；背景图本身可设
background-attachment: fixed配合padding实现视觉“裁剪”效果
background-image 覆盖安全区域需配合 background-position 和 padding
封面图常设为 background-image，但单纯靠 background-position: center top 无法保证重要内容（如标题）不被遮挡——因为“top”是相对于元素盒模型，而安全区域是相对于物理屏幕。
- 先给容器加
padding-top: env(safe-area-inset-top)（带 fallback），让内容区整体下移 - 再设
background-position: center calc(50% - env(safe-area-inset-top, 0px) / 2)，让背景图视觉中心上移补偿 - 避免用
background-size: cover+background-attachment: fixed组合在低端 iOS 上触发渲染 bug（表现为背景跳动或错位） - 真机测试时务必旋转设备——横屏下
safe-area-inset-left和safe-area-inset-right才生效，封面左右文字可能被 Home Indicator 遮住
JavaScript 检测 safe-area-inset 是否可用并降级
CSS 变量不可脚本读取，但可以通过 getComputedStyle 间接判断是否生效，用于动态加载 fallback 图或提示文案。
- 执行
getComputedStyle(document.documentElement).getPropertyValue('padding-top')并检查是否含env(字符串，不严谨但够用 - 更可靠方式：创建一个临时元素，设
style.paddingTop = 'env(safe-area-inset-top)'，再读取 computed 值是否为"0px"（未支持）或具体像素值 - 不要依赖
window.visualViewport，它反映的是缩放视口，和安全区域无关 - 降级方案优先用固定像素（如
env(safe-area-inset-top, 44px)），而不是 JS 插入 class——CSS fallback 更快、更稳定
安全区域不是“写了就完事”的开关，它依赖 viewport 声明、CSS 变量、背景定位三者协同；最容易被忽略的是横屏下的左右 inset，以及 Android 对 viewport-fit 的碎片化支持——有些国产浏览器识别 cover 但忽略 env() 变量，得靠实际真机交叉验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
