viewport-fit=cover必须加，否则env(safe-area-inset-bottom)恒为0；需与width=device-width、initial-scale=1.0共存，且仅ios safari识别，配合@supports降级和visualviewport监听实现跨端适配。
viewport-fit=cover 必须加，否则安全区变量无效
不加这个 meta，env(safe-area-inset-bottom) 就是摆设。iOS 默认用 viewport-fit=contain，内容自动避开底部黑条，但你的 fixed 按钮也会被“挤”上去——不是遮挡，是系统帮你躲开了，结果按钮悬在黑条上方 20px 处，用户点不到。
正确写法只有一行：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">。加完后，页面才真正覆盖全屏，你才有机会用 CSS 主动控制按钮位置。
- 别写成
viewport-fit: cover（这是 CSS 属性，无效） - 别漏掉
initial-scale=1.0，否则部分 iOS 版本会忽略viewport-fit - 加在
最前面，避免被后续 meta 覆盖
bottom: env(safe-area-inset-bottom) 是核心，但必须降级
直接写 bottom: env(safe-area-inset-bottom) 只对 iOS 11+ 生效，旧版 Safari 会整个忽略这条规则，按钮就掉到底部被黑条吞掉。
必须用 @supports 包一层，给不支持的设备 fallback：
.fixed-btn {
position: fixed;
bottom: 24px; /* 降级值，确保老设备有基础偏移 */
}
<p>@supports (bottom: env(safe-area-inset-bottom)) {
.fixed-btn {
bottom: env(safe-area-inset-bottom, 24px);
}
}</p>
-
env(safe-area-inset-bottom, 24px)里的24px是兜底值，不能写0，否则老设备按钮紧贴屏幕底边，仍会被遮 - 别叠加
calc()像calc(24px + env(...))——iOS 15.4 之前不支持这种组合，直接失效 - 安卓完全不识别这个变量，此处降级只是保 iOS 兼容，安卓需另谋方案
安卓设备得靠 JS 监听 visualViewport，别信纯 CSS
安卓 Chrome 80+ 和大部分国产浏览器（如 UC、QQ 浏览器）根本不支持 env(safe-area-inset-bottom)，也不响应 keyboard-inset-bottom（仅 iOS 16.4+ 支持）。想靠 CSS 一招通吃，只会让按钮在键盘弹起时直接飞走或卡在半空。
唯一可靠路径是监听 visualViewport 的 resize 事件：
if ('visualViewport' in window) {
const btn = document.querySelector('.fixed-btn');
const update = () => {
const offset = window.innerHeight - visualViewport.height;
btn.style.bottom = offset + 'px';
};
visualViewport.addEventListener('resize', update);
// 页面卸载前清理
window.addEventListener('beforeunload', () => {
visualViewport.removeEventListener('resize', update);
});
}
-
window.innerHeight - visualViewport.height算出来的是被键盘“吃掉”的高度，直接赋给bottom就能让按钮始终浮在键盘顶上 - 别用
scroll或focusin事件代替——它们触发时机不准，常出现按钮跳动或延迟上浮 - 务必加
beforeunload清理监听，否则内存泄漏风险高，尤其在单页应用中
sticky 替代 fixed 是最省心的长期方案
如果你的悬浮按钮本来就在内容流底部（比如聊天输入框、评论提交栏），position: sticky 比 fixed 更稳——它不脱离文档流，键盘弹出时不会失锚，也不受 transform 或缩放干扰。
前提很简单：父容器要有明确高度，且允许内部滚动：
.chat-input-container {
min-height: 100vh;
position: relative;
}
<p>.chat-submit-btn {
position: sticky;
bottom: 0;
}</p>
- 别在父容器上设
overflow: hidden或transform，这两者会让sticky失效 - iOS 15.4+、Android Chrome 90+ 均支持，旧版本可渐进增强为
position: absolute; bottom: 0 - 最大的坑是误以为
sticky需要配合top才能用——其实bottom同样有效，且更贴合底部按钮场景
实际项目里，三者往往共存：viewport meta 打底，CSS env 保 iOS，JS visualViewport 补安卓，sticky 作为新页面首选。最易被忽略的不是写法，而是没验证真机键盘弹起后的触摸坐标是否精准——很多按钮样式正常，但点击区域偏移 10–20px，用户点不中。这点必须用真机开启“辅助触控”或“放大触摸反馈”来确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
