ios h5端键盘弹出会破坏fixed定位，因safari不压缩webview高度、window.innerheight几乎不变，但visualviewport被缩窄导致fixed元素物理位置落至键盘下方而视觉错位；应改用flex流式布局替代fixed，并监听visualviewport.resize动态调整布局。
为什么iOS H5端键盘弹出会破坏fixed定位
因为iOS Safari不压缩webview高度，window.innerHeight在键盘弹出/收起前后几乎不变，但视觉上页面被“顶起”了——实际是visualViewport被缩窄，而layoutViewport仍维持原尺寸。此时position: fixed; bottom: 0的元素，物理位置还在webview底部，但那个位置已落到键盘下方，视觉上就“消失”或错位。
常见表现：底部按钮/输入框在键盘弹出后不可见，收起后也不自动回落；scrollIntoView失效；resize事件不触发。
- 不要依赖
window.innerHeight变化判断键盘状态——iOS下它基本不动 - 避免对
body或html设height: 100vh，这会放大错位幅度 -
touch-action: none加在固定容器上可防止意外拖拽滚动，但不能解决定位偏移
用visualViewport监听真实视口变化
这是目前iOS最可靠的键盘检测手段，它反映用户真正“看到”的区域大小，且键盘弹出时会立刻触发resize事件。
注意：需降级兼容旧版Safari（visualViewport未定义时，fallback到screen.height粗略估算）：
export default {
data() {
return {
viewportHeight: window.innerHeight
}
},
mounted() {
this.updateViewportHeight()
if (window.visualViewport) {
window.visualViewport.addEventListener('resize', this.updateViewportHeight)
} else {
window.addEventListener('resize', this.updateViewportHeight)
}
},
beforeUnmount() {
if (window.visualViewport) {
window.visualViewport.removeEventListener('resize', this.updateViewportHeight)
} else {
window.removeEventListener('resize', this.updateViewportHeight)
}
},
methods: {
updateViewportHeight() {
this.viewportHeight = window.visualViewport
? window.visualViewport.height
: window.innerHeight
}
}
}
后续所有布局调整（如padding-bottom、容器max-height）都应基于this.viewportHeight计算，而非window.innerHeight。
底部输入框必须脱离fixed，改用flex流式布局
强行用position: fixed在iOS下注定失败。正确做法是让输入框成为内容流的一部分，并用Flex控制其“贴底”行为。
关键CSS结构：
.page-container {
display: flex;
flex-direction: column;
height: 100vh;
}
.header { flex-shrink: 0; }
.content { flex: 1; overflow-y: auto; }
.input-wrapper {
flex-shrink: 0;
/* 不设height，靠内容撑开 */
/* 键盘弹出时，flex会自动压缩content区域，input-wrapper自然上浮 */
}
这样做的好处：
- 键盘弹出时，
visualViewport.height变小 →flex: 1区域自动收缩 →input-wrapper被“托起”，始终可见 - 收起键盘后，视口恢复 →
content重新撑开 →input-wrapper自然回落到底部 - 完全规避
fixed在iOS下的定位断裂问题
收起键盘后强制重绘safe-area-inset-bottom
iOS键盘收起后，env(safe-area-inset-bottom)有时不会立即更新，导致padding-bottom: calc(env(safe-area-inset-bottom) + Xpx)残留旧值，底部多出空白。
简单有效的方式是在键盘收起后手动触发一次重绘：
methods: {
handleKeyboardHide() {
// 强制刷新CSS变量计算上下文
document.body.style.transform = 'translateZ(0)'
setTimeout(() => {
document.body.style.transform = ''
}, 16)
}
}
或者更稳妥地，在visualViewport.resize回调中判断高度回升后，主动设置padding-bottom为0再重置：
if (newHeight > this.lastHeight * 0.95) { // 高度恢复95%以上视为键盘收起
this.$nextTick(() => {
document.body.style.paddingBottom = '0'
document.body.offsetHeight // 强制reflow
document.body.style.paddingBottom = 'env(safe-area-inset-bottom)'
})
}
这个细节容易被忽略，但恰恰是iOS H5端底部留白的最后一环——不是JS没动，而是CSS变量没重算。
