文件名称：小程序以及H5页面上IphoneX底部安全区域小黑条适配问题
文件大小：107KB
文件格式：PDF
更新时间：2024-04-18 10:44:40
小,程序,以及,页,面上,IphoneX,底部,安全,区域,
背景 公司项目开发中，发现iPhoneX上吸底元素存在被小黑条遮挡的问题 原因 在苹果 iPhoneX 、iPhone XR等机型上，物理Home键被取消，改为底部小黑条替代home键功能,从而导致吸底元素会被小黑条遮挡覆盖的问题 解决方案 使用已知底部小黑条高度为34px/68rpx机型适配(不建议) 使用微信官方API，getSystemInfo()中的safeArea对象进行适配（建议） 使用苹果官方推出的css函数env()、constant()来适配 （建议） 安全区域 看看图就明白了，中间绿色区域即为安全区域。也就是说，适配安全区域也就是让小程序或者H5的内容显示在绿色区域部分。