目录一、为什么需要适配二、方案一：CSS 环境变量（首选）底部固定操作栏的标准写法自定义导航栏的顶部适配三、方案二：JS API 动态获取1.uni.getSystemInfoSync() 获取安全区2. uni.getMenuButtonBoundingClientRect() 适配胶囊四、典型场景的完整代码片段场景 1：底部固定按钮栏场景 2：微信小程序自定义导航栏场景 3：底部弹出层（如 uni-popup）五、常见踩坑与排查六、适配方案速查表屏幕安全区域指设备屏幕上不被状态栏、刘海、圆角、底部指示条（Home Indicator）或虚拟按键遮挡的可视区域。在微信小程序中，iPhone X 及之后的全面屏机型底部约有 34px 的 Home Indicator 安全区，顶部状态栏高度因机型从 20px 到 59px 不等；如果在底部固定按钮、自定义导航栏、弹出层等场景不处理这些区域，就会出现按钮被遮挡、内容压在状态栏下、点击失效等典型问题。下面从概念、方案到代码给出完整说明。一、为什么需要适配全面屏手机的结构性改动主要体现在两端：顶部：刘海屏/灵动岛机型状态栏高度增加，使用自定义导航栏（navigationStyle: "custom"）时页面内容会顶到屏幕最上沿，被状态栏文字、电量图标遮挡php.cn。底部：Home Indicator 区域与页面内容重叠，固定在底部的按钮、tabBar、操作栏会被横条盖住，影响点击uvui.cn。不同 iPhone 机型的安全区参考值：机型状态栏高度底部安全区iPhone 8 / SE（非全面屏）20px0iPhone X / 11 Pro / 12 mini / 13 mini44px34pxiPhone 12 / 13 / 1447px34pxiPhone 14 Pro / 15 / 16（灵动岛）54px34px这些数值不能硬编码，必须通过 CSS 环境变量或 JS API 动态获取。二、方案一：CSS 环境变量（首选）iOS 11.2+ 支持env()，iOS 11.0–11.1 仅支持constant()。两者必须同时写，且constant()在前、env()在后，否则旧系统会解析失败导致样式失效uvui.cn+1。四个方向的安全距离：env(safe-area-inset-top); /* 顶部，刘海/状态栏 */ env(safe-area-inset-bottom); /* 底部，Home Indicator */ env(safe-area-inset-left); /* 左侧，横屏刘海 */ env(safe-area-inset-right); /* 右侧，横屏刘海 */底部固定操作栏的标准写法.footer-bar { position: fixed; left: 0; right: 0; bottom: 0; /* 顺序不能颠倒：constant 兼容 iOS 11.0-11.1，env 兼容 iOS 11.2+ */ padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; /* 关键：让 padding 叠加在内容高度之外 */ }列表页底部留白（防止最后一项被指示条盖住）：.list { padding-bottom: 0; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }关键细节：safe-area-inset-bottom是一个长度值，可直接用于padding-bottom、height、bottom等属性，不要追加 px 单位，写成env(safe-area-inset-bottom)px会解析失败。自定义导航栏的顶部适配在pages.json中开启navigationStyle: "custom"后，页面内容会顶到状态栏。最简单的做法是用一个占位view让出状态栏高度：view/view viewg