scroll-margin-bottom需配合可滚动容器生效：输入框须在文档流中、父容器设overflow-y:auto且有明确高度（如min-height:100dvh）、输入框不能脱离流或隐藏；Android微信需JS降级。
直接用 scroll-margin-bottom + 可滚动容器，比写一堆 JS 更快、更稳——前提是输入框在文档流里，且父容器没加 overflow: hidden 或 transform。
scroll-margin-bottom 要怎么配才生效
它不是“写了就自动避让”，得满足三个条件：输入框必须在可滚动的容器内、该容器要设 overflow-y: auto、输入框本身不能是 display: none 或被 visibility: hidden 隐藏。
- 给输入框外层加
scroll-margin-bottom: 120px（iOS 键盘高度约 200–250px，留 120px 是保险值） - 确保它的父容器有明确高度（比如
min-height: 100dvh），且设了overflow-y: auto - 别把输入框包在
position: fixed容器里——scroll-margin-bottom对脱离文档流的元素无效 - Android 微信内置浏览器不支持该属性，需用 JS fallback，比如监听
focusin后调input.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
为什么 100vh 在键盘弹出时会失效
100vh 是静态单位，始终按设备屏幕物理高度计算，软键盘弹出后它不会变小。结果就是底部输入框被“钉死”在页面底边，而视口实际可视区域已压缩，输入框就被盖住了。
- 改用
min-height: 100dvh（dynamic viewport height），Safari 16.4+ 和 Chrome 105+ 支持，它代表“无键盘时的完整视口高” - 老版本兼容方案：CSS 层叠写法
min-height: 100vh; min-height: 100dvh;，后者覆盖前者 - 千万别写
height: 100vh包裹整个表单——键盘一出，内容直接被截断，滚动都拉不到底部
fixed 底部按钮被顶起来怎么办
这不是 z-index 问题，是 iOS 把 fixed 元素锚定在初始视口高度上，键盘压下来，它就飘到中间了。
立即学习“前端免费学习笔记（深入）”；
- 首选方案：用
position: sticky; bottom: 0替代fixed，父容器设min-height: 100dvh即可自然贴底 - iOS 16.4+ 可用
bottom: env(keyboard-inset-bottom, 0px)，但必须加@supports (bottom: env(keyboard-inset-bottom))降级 - 安卓完全不支持
env(keyboard-inset-bottom)，fallback 方案是给最外层容器加padding-bottom: 240px（实测常用值），并在blur时清空 - 别在 body 上直接加
margin-bottom——它不阻止遮挡，还可能触发外边距合并
真正容易被忽略的是嵌套层级：只要输入框父级或 body 上有 transform、perspective 或 will-change，getBoundingClientRect() 就会返回错误坐标，连带 scrollIntoView 和 scroll-margin-bottom 都失效，而且毫无报错提示。
