css safe area

适配iphoneX底部的小黑条

背景

从苹果手机的iphoneX及以后,手机的屏幕顶部就出现了“齐刘海”和底部小黑横条的样式。不少app直接兼容了里面的webview的样式,屏幕在竖屏下顶部往往是导航栏,不会遮住webview里面的内容,而底部则从app层面设置了底部高度,使webview底部不在黑色横条区域内,这样就不会阻碍展示webview里面的内容。

但是,每个app千差万别,里面的webview也就展现不一,如果没有app底部高度,那么webview里面的底部内容就会被小黑条遮挡。从网页样式兼容性来说,需要兼容iphoneX后特有的“齐刘海”和底部小黑横条样式,又不影响以前机型的样式。

安全区域

首先了解一下iphoneX的安全区域,下图蓝色部分为安全区域,而两边的margin、顶部齐刘海和底部小黑条区域都属于不安全区域,属于内容有可能会被遮挡的区域,那么我们需要控制我们的内容在安全区域内。

安全区域

兼容方案

所幸,在iphoneX出来的时候,官方的ios11系统也提供了WebKit Api去兼容这种样式差异。

第一步:设置viewport-fit属性

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

viewport-fit有auto,contain,fit三个属性值,默认是auto。
contain: 可视窗口完全包含网页内容, 页面内容显示在safe area内
cover:网页内容完全覆盖可视窗口,页面内容充满屏幕
auto:默认值,跟 contain 表现一致

viewprt-fit=contain

viewprt-fit=cover

默认情况下,safari展示的是viewport-fit=contain的情况,如下图,在横屏下,webview里的页面内容在安全区域内,但是从样式上看,这不太美观,并且没有利用好iphoneX赋予的全屏特性。

image.png

设置viewport-fit=cover后,如下图,内容全屏展示,但是左边的内容被“齐刘海”挡住了。

image.png

为了解决这个问题,ios11中的WebKit包括了一个新的CSS函数env(),以及四个预定义的环境变量safe-area-inset-leftsafe-area-inset-rightsafe-area-inset-topsafe-area-inset-bottom。这四个环境变量代表了距离安全区域的距离。

  • safe-area-inset-left:安全区域距离左边边界距离
  • safe-area-inset-right:安全区域距离右边边界距离
  • safe-area-inset-top:安全区域距离顶部边界距离
  • safe-area-inset-bottom:安全区域距离底部边界距离

ios11.2以前用的是constants()函数,后来在ios11.2版本改成了env()函数,为了兼容两者,可以都写上。

第二步:设置安全区域距离

.post {
    padding: 12px;
    padding-left: constants(safe-area-inset-left); // ios<11.2
    padding-left: env(safe-area-inset-left); // ios>=11.2
}

这样,当出现不在安全区域时,env(safe-area-inset-left)不等于0,那么就会导致在padding-left上设置了一个安全距离,从而使内容不被遮挡。

image.png

上面是被“齐刘海”挡住的情况,实际比较多的情况用在底部小黑条挡住悬浮bar的情况,加上属性支持判断@supports,只有env(safe-area-inset-bottom)被浏览器支持的时候才会执行里面的css。

.bottom-bar{
  width: 100%;
  position: fixed;
  bottom: 0;
  background: blue;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-bar {
      padding-bottom: constant( safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

注:微信内的webview是默认viewport-fit=cover的状态的,只需要设置安全距离即可,微信小程序同样适用上述方案。

iphonex以上手机非矩形界面适配前:

image.png

适配后,iphonex以上手机非矩形界面自动适配底部高度:

image.png

不是不规则矩形的情况:

image.png

总结

手机在更新换代,随着手机样式发生改变,样式兼容问题也接踵而至,但是问题的制造者往往也是问题的解决者,开发者也不用焦虑找不到解决方案,从而使我们更专注业务逻辑本身。

参考文章

Leave a Comment

Your email address will not be published.