必须在viewport meta中添加viewport-fit=cover才能启用ios微信的安全区域感知，否则env(safe-area-inset-bottom)恒为0；底部导航需用padding-bottom兜底+env()覆盖，主内容用margin-bottom预留空间，键盘弹出时需js动态调整。
微信 WebView 底部导航条遮住 fixed 元素怎么办
直接用 position: fixed; bottom: 0 在 iOS 微信里大概率被底部「小白条」（前进/后退/更多按钮）截断，尤其 iPhone X 及之后机型。这不是样式写错了，是微信 WebView 默认不启用安全区域感知，env(safe-area-inset-bottom) 永远返回 0px，除非你显式告诉它“请覆盖整个视口”。
必须在 <meta name="viewport"> 中加 viewport-fit=cover，否则所有后续适配都无效：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
- 缺了这句，
env(safe-area-inset-bottom)在微信 iOS 中始终为0px -
maximum-scale=1.0和user-scalable=no不是必需的，别为了“防缩放”硬加上去，可能干扰原生手势 - 安卓微信不支持
env()，但也不显示小白条，所以该属性对它无影响，无需降级处理
给底部导航栏加安全区 padding 的正确写法
不能只写 padding-bottom: 60px，也不能只依赖 env() —— 要兼容旧版 iOS（如 11.2 以下）和新版，且确保 fallback 可靠：
.bottom-nav {<br> position: fixed;<br> bottom: 0;<br> left: 0;<br> right: 0;<br> height: 60px;<br> padding-bottom: 60px; /* fallback for non-env browsers */<br> padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */<br> padding-bottom: calc(60px + env(safe-area-inset-bottom)); /* Safari 15.4+ only */<br>}
- 前两行是必须的：先设固定值兜底，再用
env()覆盖；CSS 会取最后一条有效声明 -
calc(60px + env(safe-area-inset-bottom))在 Safari 15.4+ 才生效，微信 iOS 用的是 Safari 内核，但版本滞后，实际建议拆成两行写，避免整条失效 - 别在
.bottom-nav上写box-sizing: border-box后又加height: 60px和padding-bottom，会导致总高度超限——padding 是额外增加的，不是包含在 height 里
主内容容器要不要加 margin-bottom
要，而且推荐加在 main 或 #app 这类明确的主内容容器上，而不是 body。
-
margin-bottom比padding-bottom更可控：它不改变容器内部滚动逻辑，不影响scrollHeight、IntersectionObserver判断，也不会因横向滚动条意外撑宽 - 写法：
main { margin-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)); }，配合:root { --nav-height: 60px; } - 别给
body设margin-bottom：某些 iOS 微信版本会触发布局抖动，导致页面闪一下或滚动锚点偏移 - 如果用了 flex 布局（比如
html, body { height: 100%; }+#app { display: flex; flex-direction: column; }），margin-bottom依然有效，但注意父容器是否设了overflow: hidden把它裁掉了
软键盘弹出时底部间距突然变大怎么处理
iOS 微信在键盘唤起后，window.innerHeight 缩小，但 env(safe-area-inset-bottom) 不更新，导致原本预留的 padding-bottom 过大，内容被顶到屏幕中间——这是 JS 层必须介入的场景。
- 监听
focusin和blur事件，在输入框聚焦时临时把底部栏切为position: absolute，失焦后秒切回fixed - 更稳的做法是动态重算视口可用高度：
document.documentElement.style.setProperty('--vh', (window.innerHeight * 0.01) + 'px');，然后用height: calc(var(--vh) * 100)控制主容器，同时配合margin-bottom预留导航空间 - 别依赖
resize事件：iOS 键盘弹出时不一定触发 resize，优先用focusin/blur+visualViewport（若支持） - 微信 WebView 中
visualViewport兼容性差，真机测试时发现不可靠，建议 fallback 到 UA 判断 + 定时轮询window.innerHeight
真正麻烦的从来不是“怎么让底部栏显示出来”，而是它在地址栏收起、键盘弹出、横竖屏切换、甚至微信版本升级后，行为全都不一样。留白值不能写死，env() 不能裸用，JS 响应不能只靠 resize —— 每一层都要有 fallback，每一处都要真机验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
