小程序 ios 全面屏底部留出安全距离

问题描述

对于苹果手机，底部有安全距离，一些底部会有遮挡，当然可以通过过去系统信息动态设置底部距离。下面提供一个用 css 设置底部安全距离的方案

解决方案

苹果官方推荐使用env()，constant()来适配，建议使用该方案，不需要管数值具体是多少。这2个方法是什么呢？

• env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：
  • safe-area-inset-left：安全区域距离左边边界的距离
  • safe-area-inset-right：安全区域距离右边边界的距离
  • safe-area-inset-top：安全区域距离顶部边界的距离
  • safe-area-inset-bottom ：安全距离底部边界的距离

因为目标是需要对底部小黑条做适配，所以只需要关注safe-area-inset-bottom这个值。

而env()和constant()函数有个必要的使用前提，当网页设置viewport-fit=cover的时候才生效，根据微信小程序的表现和我在实际真机测试时这两个函数生效，推测小程序里的viewport-fit默认是cover。

有一点要注意，在IOS11.2系统以前，可以使用constant()函数，但是在IOS11.2系统以后，这个函数就被废弃了，被env()函数替代了。官方原话如下：

The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.

所以我们在做屏幕适配时，需要这样写：

padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/

注意：env()和constant()需要同时存在，而且顺序不能换。

参考文章

• iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配