env(safe-area-inset-bottom)解决ios底部小黑线遮挡问题

2,533 阅读1分钟

最近在做微信小程序,有一个功能是提交按钮放在屏幕底部,使用了position:absolute定位,bottom设置为0,正常显示应该是这样的 :

image.png

但是自测的时候发现如果在部分ios机型,比如iPhoneX、iPhone12/13的时候,按钮会被ios底部的小黑线所遮挡一部分:

image.png

这样显示明显不太友好,因此研究了一下,发现css中有一个特性可以解决iso底部小黑线的问题,即env(safe-area-inset-bottom)。 safe-area,即安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)的影响。

最开始使用这个属性的时候,我直接给positon:absolute的bottom加了这个属性,但是测试发现给bottom加这个属性虽然可以使底部留下一定的安全距离,但是空出来的部分会透出页面滚动的内容。

image.png

此时css代码是这样的:

  position: fixed;
  left: 0;
  bottom: env(safe-area-inset-bottom);

又经过一系列调整发现,把env(safe-area-inset-bottom)这个属性加到height上或者padding上比较合适,效果如下:

image.png

此时css代码是这样的:

  position: fixed;
  left: 0;
  bottom: 0;
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));

圆满解决问题!

我尝试了把属性放在height上,也可以解决这个问题,代码如下:

  position: fixed;
  left: 0;
  bottom: 0;
  height:  calc(100rpx + env(safe-area-inset-bottom));

image.png

image.png