应使用100dvh替代100vh，兼容老版本则结合focus/blur监听与min-height:100vh+height:100dvh层叠；fixed输入框避免scrollintoview，改用scroll-margin-bottom或手动scrollto；键盘收起用visualviewport.resize替代resize事件；flex布局需设height:100dvh及子项min-height:0。
input聚焦时页面被顶起，vh计算失准怎么办
移动端 Safari 和部分安卓 WebView 在软键盘弹出时会动态收缩视口高度，导致用 100vh 布局的页面“被顶起”，底部 input 仍被遮挡。这不是 CSS 写错了，而是浏览器把软键盘当成“视口的一部分”临时重算了 vh。
实操建议：
- 别依赖
100vh做全屏容器高度——它在键盘弹出时可能只剩一半 - 改用
100dvh（dynamic viewport height），Chrome 105+、Safari 16.4+ 已支持，它始终代表“无键盘时的完整视口高” - 兼容老版本？用 JS 监听
focusin/blur，动态切换一个 class，配合min-height: 100vh+height: 100dvh的层叠策略
fixed定位输入框被键盘盖住，scrollIntoView 失效怎么修
当 input 放在 position: fixed 的底部栏里，iOS 上 scrollIntoView 经常不触发滚动，或只滚到键盘边缘，不是输入框顶部。
实操建议：
- 避免对
fixed元素直接调用scrollIntoView——它不参与文档流，滚动上下文失效 - 改监听
focus事件，在回调里手动计算并设置window.scrollTo(0, target.offsetTop - 100)（减去预估键盘高度） - 更稳的做法：给 input 父容器加
scroll-margin-bottom: 120px，再调element.scrollIntoView({ block: 'nearest', behavior: 'smooth' }) - 注意 Android 微信内置浏览器不支持
scroll-margin-bottom，需降级为 JS 滚动
键盘收起后页面留白、内容错位，resize 事件靠不住
很多方案靠监听 window.resize 来恢复布局，但 iOS 键盘收起时该事件不触发，或触发过早（键盘还没完全消失），导致页面卡在“半收缩”状态。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
实操建议：
- 别只依赖
resize——它在 iOS 上对键盘响应不可靠 - 组合监听：
focusout+setTimeout(..., 300)延迟恢复，覆盖大部分收起场景 - 更精准：用
visualViewportAPI（Chrome/Edge/Safari 支持），监听visualViewport.height变化，它对键盘伸缩响应及时 - 示例：
visualViewport.addEventListener('resize', () => { document.body.style.height = `${visualViewport.height}px`; });
弹性布局（flex）下内容被压缩，min-height 不生效
用 display: flex; flex-direction: column 做页脚吸底时，键盘弹出会挤压中间区域，导致文字折行、按钮变形，甚至 min-height: 0 都压不住收缩。
实操建议：
- 给 flex 容器的子元素（尤其是中间内容区）显式设
min-height: 0和overflow: hidden，防止 flex 项被过度压缩 - 关键点：父容器必须设
height: 100dvh（非min-height），否则 flex 无法正确分配剩余空间 - 如果内容区含
textarea，还要加resize: none，避免用户拖拽放大后进一步破坏布局
最麻烦的其实是安卓各厂商 WebView 对视口行为的魔改——有的把键盘算进 vh，有的不算，有的还吃掉 visualViewport 事件。真要全覆盖，得把 dvh、resize、focus、visualViewport 几套逻辑按 UA 分层兜底，而不是指望一个 CSS 属性一劳永逸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
