iPhoneX安全区域H5的屏幕适配

在苹果 iPhoneX 、iPhone XR等设备上，可以看到物理Home键被取消，改为底部小黑条替代home键功能。

h5 网页需要针对这种情况进行适配，否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情况。

具体方案如下：

使用苹果官方推出适配方案css函数env()、constant()来适配 

 

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()函数替代了。

具体操作如下：

1.在index.html中设置如下代码（将viewport设置为cover，env和constant才能生效）：

 

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

 

2.设置公共样式（同时设置env和constant代码，同样env()和constant()需要同时存在，而且顺序不能换）：

/* 可以通过增加padding-bottom来适配 */

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

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

/* 可以通过margin-bottom来适配 */

margin-bottom: constant(safe-area-inset-bottom);

margin-bottom: env(safe-area-inset-bottom);

/* 或者改变高度*/

height: calc(55px +  constant(safe-area-inset-bottom));

height: calc(55px +  env(safe-area-inset-bottom));

 

3.也可以在底部添加一个空白的div颜色块来做适配。

还有一种是使用 @supports 隔离兼容样式

可以使用 @supports 来隔离兼容样式，当浏览器支持bottom: constant(safe-area-inset-bottom)

或者bottom: env(safe-area-inset-bottom)的时候，bottom-button类就会新增margin-bottom的样式

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { 

   .bottom-button {

        margin-bottom: constant(safe-area-inset-bottom);

        margin-bottom: env(safe-area-inset-bottom);  

   }

}