木灵鱼儿

木灵鱼儿

阅读:749

最后更新:2021/04/29/ 15:07:03

移动端适配iPhoneX和安卓底部小黑条

这个问题还是同事发现的,毕竟我这种穷人根本用不起苹果,更何况也用不来,毕竟,我爱安卓。

废话不多说,主要问题就是 iPhoneX底部小黑条问题,他的宽度也会被网页占据,导致小黑条显示在网页上头,第一是触发上会出现问题,第二是难看。

解决办法就是通过css处理。

解决方案

首先对meta标签添加一条属性。

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

如果你已经有了viewport声明,那么就在后面content里加上viewport-fit=cover即可。

viewport-fit:IOS11新增的特性,是为了iPhoneX而对meta标签做出的一个拓展属性。目前有三个值:
contain 可视窗口完全包含网页内容

cover:网页内容完全覆盖可视窗口

auto:默认值,跟 contain 表现一致

关键就是我们要设置为cover。

然后我们需要设置安全距离,其实就是拿到底部按钮的高度。

body {
    padding-bottom: constant(safe-area-inset-bottom); 
    padding-bottom: env(safe-area-inset-bottom);
}

注意这两条css的顺序,constant是最新的标准,应用于IOS11.2之后的版本,之前则是使用env,按照css的兼容性写法,最新的写前面,优先使用,兼容的写后面。

这样我们的body就会在x设备上,底部padding多出一部分值,如果是其他设备,则无效果。

这样我们就可以方便操作了,比如:

.safe {
    height: constant(safe-area-inset-bottom);
    height: env(safe-area-inset-bottom);
    background-color: #fff;
    overflow: hidden;
  }

设置一个class,他的高度为底部按钮的高度,然后放在html底部,这样,内容在x设备上就会撑出底部小黑条按钮高度,不影响网页使用。

当然也可以用于fixed布局bottom的值,具体就看自己怎么用了。

群友分享的刘海屏+小黑条方案

body {
    padding-top: constant(safe-area-inset-top);   //为导航栏+状态栏的高度 88px            
    padding-left: constant(safe-area-inset-left);   //如果未竖屏时为0                
    padding-right: constant(safe-area-inset-right); //如果未竖屏时为0                
    padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px       
}

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 749

相关文章