在ios safari中，软键盘弹起会导致视口高度（visual viewport）缩小，若页面使用固定定位或绝对定位且未适配此变化，元素会发生错位。解决的核心思路是监听`visualviewport`的`resize`事件，动态调整容器的高度或位置，确保内容不被遮挡。
如何检测并响应视口高度变化
通过监听`window.visualViewport`对象的`resize`事件，可以实时获取当前可视区域的高度。当软键盘弹出时，`visualViewport.height`会减小，此时只需将底部容器的`bottom`属性设置为键盘上方，即可避免重叠。
const viewport = window.visualViewport;
const footer = document.querySelector('.footer');
viewport.addEventListener('resize', () => {
const keyboardHeight = window.innerHeight - viewport.height;
if (keyboardHeight > 0) {
footer.style.bottom = `${keyboardHeight}px`;
} else {
footer.style.bottom = '0';
}
});上述代码在键盘高度大于零时，动态计算差值并赋值给bottom属性。这确保了无论键盘多高，底部栏始终紧贴可视区域底部。
立即学习“前端免费学习笔记（深入）”；
如何处理输入框被遮挡的问题
除了底部元素，输入框本身也可能被键盘遮挡。利用scrollIntoView方法或监听focus事件滚动页面，可保证输入框可见。结合visualViewport信息，可以更精准地控制滚动行为。
const input = document.querySelector('input');
input.addEventListener('focus', () => {
setTimeout(() => {
input.scrollIntoView({ behavior: 'smooth', block: 'center' });
}, 300);
});这里使用setTimeout延迟执行，等待键盘动画完成后再滚动。这种方式简单有效，避免了因滚动时机过早导致的跳动问题。
当输入框位于底部时如何优化体验
如果输入框本身就位于页面底部，直接滚动可能导致页面过度上移。此时应结合visualViewport的高度变化，判断是否需要滚动以及滚动多少距离，以保持输入框在可视区域内且不浪费屏幕空间。
