iphone/iphoneX 状态栏高度/底部安全区域高度

状态栏高度

  • iphone 20
  • iphoneX 44

iphoneX 安全区域高度

34


在H5上适配安全区域

viewport-fit默认有3个值:

  • contain:可视窗口完全包含网页内容(左图)
  • cover:网页内容完全覆盖可视窗口(右图)
  • auto:默认值,此值不影响初始布局视图端口,并且整个web页面都是可查看的。

contain和cover具体区别如下图:

而我们需要将viewport设置为cover,env和constant才能生效。设置代码如下:

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

同时设置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));

也可以在底部添加一个空白的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);
    }
}

参考内容

展示评论