viewport-fit=cover 必须配合 user-scalable=no、maximum-scale=1.0 和 minimum-scale=1.0 才能彻底禁用缩放，避免双指缩放导致错位；env(safe-area-inset-top) 需手动用于 padding 或 top 以避让刘海/挖孔，fixed 元素需单独处理，且 android webview 需客户端配置才透出安全区值。
viewport-fit=cover 必须配 user-scalable=no + max/min-scale=1.0
只加 viewport-fit=cover 会导致 iOS Safari 允许双指缩放，页面一捏就错位，顶部状态栏区域内容被拉伸或偏移。这不是“适配没生效”，而是视口行为没锁死。
真正起效的写法是：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
-
user-scalable=no单独存在时，仅禁用双击缩放，但手势缩放仍可用 -
maximum-scale=1.0和minimum-scale=1.0才能彻底关闭所有缩放行为 - 缺任意一项，表单聚焦时系统自动放大就会引发布局跳变、光标错位
env(safe-area-inset-top) 不是自动避让，必须手动加 padding 或 margin
viewport-fit=cover 的作用只是“让页面撑满屏幕”，它不移动任何元素——顶部导航栏、固定定位按钮依然会直接顶到状态栏下方，也就是刘海正下方。你看到的重叠，是内容没主动退让的结果。
正确做法是用 CSS 主动预留空间：
body {<br> padding-top: env(safe-area-inset-top);<br> padding-top: constant(safe-area-inset-top); /* iOS 11.0–11.2 兼容 */<br> padding-top: 44px; /* fallback，iOS 状态栏典型高度 */<br>}
-
env()仅在 iOS 11.3+ 和部分 Android WebView 中返回真实像素值（如44px），其他环境返回0px -
constant()在 iOS 11.0–11.2 中有效，之后被弃用，但保留兼容写法更稳妥 - fallback 值建议设为
44px（iOS）或24px（Android），不要用0或1rem这类无意义兜底
fixed 定位元素必须单独处理安全区
全局 body 加 padding-top 对普通流式内容有效，但对 position: fixed 的顶部导航栏、返回按钮无效——它们脱离文档流，不会被 body 的 padding 推开。
这类元素要单独设置：
.header {<br> top: env(safe-area-inset-top);<br> top: constant(safe-area-inset-top);<br> top: 44px;<br>}
- 不能只靠
padding，必须用top或margin-top显式位移 - 如果同时用了
transform: translateY()，优先级低于top，需避免混用造成冲突 - 微信内置浏览器（X5内核）对
env()支持不稳定，建议搭配 JS 检测后动态加 class 控制
Android 挖孔屏和 iOS 刘海屏的安全区值来源不同
Android 的 env(safe-area-inset-top) 并非来自系统状态栏高度，而是 WebView 自身是否启用“全屏沉浸模式”。很多安卓厂商 WebView 默认不暴露安全区变量，即使写了 viewport-fit=cover，env() 也可能始终返回 0px。
- 华为、小米部分机型需客户端侧开启
webSettings.setWebContentsDebuggingEnabled(true)或配置android:fitsSystemWindows="true"才能透出值 - 测试时别只信 Chrome DevTools 模拟，务必用真机 + 微信开发者工具验证，后者对安卓挖孔屏识别更准
- 降级方案不是“猜高度”，而是用 JS 检测：
if (window.CSS && CSS.supports('padding-top', 'env(safe-area-inset-top)'))，再决定是否启用 env 规则
实际项目里最容易被忽略的，是 fixed 元素的 top 偏移和 Android WebView 的安全区透出条件——这两点不处理，哪怕 viewport 和 body padding 都写对了，按钮照样点不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
