结论：用 flex 布局 + min-height: 100vh 是目前 ios/android 各浏览器兼容性最好、代码最轻、无需监听事件的方案；position: fixed 在 ios safari 中极易被键盘顶起或错位，慎用。
直接说结论：用 flex 布局 + height: 100vh 或 min-height: 100vh 是目前 iOS/Android 各浏览器兼容性最好、代码最轻、无需监听事件的方案；position: fixed 在 iOS Safari 中极易被键盘顶起或错位，慎用。
为什么 position: fixed 在 iOS 上会失效
iOS Safari 的视口行为特殊：软键盘弹出时，window.innerHeight 会临时缩小，但 fixed 元素仍按“旧高度”计算定位，导致输入框上移、消失或卡在半空；QQ 浏览器、微信内置 WebView 也继承了类似逻辑。更麻烦的是，部分机型（如 iPhone 12+）还会因安全区域（safe area）造成底部留白或遮挡。
常见错误现象包括：
-
input获取焦点后突然“跳到页面中间” - 键盘收起后
input残留在顶部，不回落 - 滚动页面后
fixed输入框位置偏移，且无法通过scrollTo修正
推荐方案：flex 布局撑满视口 + 内容区自动滚动
核心是把整个页面当作一个垂直 flex 容器，让内容区（如聊天记录列表）占满剩余空间，输入框作为固定高度的底部区块自然贴底，且不脱离文档流 —— 键盘弹起时，浏览器会自动调整可视区域，flex 容器随之收缩，输入框仍保持在视口底部。
关键 CSS 如下：
.page {
display: flex;
flex-direction: column;
min-height: 100vh; /* 不用 height: 100vh，防 Safari 首屏渲染异常 */
}
.chat-list {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* iOS 滚动顺滑 */
}
.input-area {
height: 88px; /* 固定高度，适配常见输入法高度 */
padding: 8px 12px;
background: #fff;
border-top: 1px solid #eee;
}
注意点：
-
min-height: 100vh比height: 100vh更稳妥，避免 Safari 首次加载时vh计算不准 -
.chat-list必须设overflow-y: auto，否则内容溢出时无法滚动 - 不要给
.input-area设position: fixed/absolute，它就老老实实做flex的最后一个子元素
如果必须用 position: fixed，怎么降低风险
仅限极简场景（如单页表单底部按钮），且需主动防御：
- 给
body加padding-bottom: 88px（与输入框高度一致），防止内容被遮盖 - 监听
focusin和focusout，在focusin时加setTimeout(() => window.scrollTo(0, 0), 100)强制重置滚动锚点 - 避开
bottom: 0，改用bottom: env(safe-area-inset-bottom)兼容刘海屏 - 在 iOS 上禁用
zoom：meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
容易被忽略的细节：输入框本身的高度与文字对齐
即使定位正确，高输入框（如 height: 60px）默认文字是垂直居中的，看起来像“悬在中间”。要让它视觉上“坐到底部”，别用 padding-bottom 推文字 —— 这会扩大可点击区域，影响手误率。
更干净的做法是包裹一层容器：
<div class="input-wrapper"> <input type="text" class="input-field"> </div>
.input-wrapper {
position: relative;
height: 60px;
}
.input-field {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 44px; /* 真实可操作高度 */
line-height: 44px;
border: none;
padding: 0 12px;
}
这样文字紧贴容器底部，又保留了触摸热区高度，比纯靠 padding 更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
