需为 iphone X 及更新全面屏 ios 设备适配底部按钮，通过在 fixed 定位的 footer 上设置 padding-bottom: env(safe-area-inset-bottom, 0px) 并添加 viewport-fit=cover 的 viewport 声明，确保按钮避开 Home Indicator 且保持贴底效果。
用 position: fixed; bottom: 0; 做底部按钮时，在 iPhone X 及更新的全面屏 iOS 设备上，容易被系统指示器（Home Indicator）遮住，用户点不到、看不清。根本原因是未考虑安全区域（safe area），需要主动适配。
使用 safe-area-inset-bottom 动态留出底部空间
iOS 提供了 css 环境变量 env(safe-area-inset-bottom)，它会返回底部安全区域高度（如 iPhone 15 是 34px）。只需把它加在按钮的 padding-bottom 或外容器的 margin-bottom 上，就能自动避开 Home Indicator。
推荐写法（按钮本身固定，但给其父容器预留空间）：
footer { position: fixed; bottom: 0; left: 0; right: 0; padding-bottom: env(safe-area-inset-bottom, 0px); /* fallback: 0px 保证老设备兼容 */ }避免直接改按钮的 bottom 值
不要写 bottom: env(safe-area-inset-bottom);，否则按钮会被“顶上去”，脱离屏幕底边，失去“贴底”效果。正确思路是：按钮仍锚定在 bottom: 0，通过内边距或父容器留空，把可点击区域自然上移，视觉和交互都保持在安全区内。
立即学习“前端免费学习笔记（深入）”；
配合 viewport meta 启用安全区域
确保页面 中有正确的 viewport 声明，否则环境变量可能不生效：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">viewport-fit=cover 是关键，它告诉 safari 允许内容延伸到屏幕边缘，从而让 env() 变量可用。
兼顾安卓和旧设备的兼容处理
安卓全面屏一般不触发 safe-area-inset-bottom（值为 0），所以无需额外判断。对不支持 env() 的老设备（如 iOS 10），用逗号后的 fallback 值即可：
-
env(safe-area-inset-bottom, 0px)→ iOS 11+ 返回实际值，其他返回 0px - 也可用
@supports做增强式布局，但多数场景 fallback 已足够
基本上就这些。不复杂但容易忽略，加一行 padding 和一个 viewport 属性，底部按钮就能在所有主流全面屏上稳稳显示、准确响应。