H5+微信小程序 —— 解决iPhoneX全面屏底部小黑条遮挡的问题

在iPhoneX全面屏手机上,屏幕底部有一条小黑条遮挡页面的显示。

为了解决这个问题,我们可以使用iOS11 的新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,它有四个预定义的变量:

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

注意:当 viewport-fit=contain 时 env() 是不起作用的,必须要配合 viewport-fit=cover 使用。对于不支持env() 的浏览器,浏览器将会忽略它。

所以,在H5的页面中,我们必须在HTML头部设置网页在可视窗口的布局方式,微信小程序似乎默认就是viewport-fit=cover,无需我们自己手动设置

然后在样式里可以这样使用 safe-area-inset-bottom

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    .tabbar{
        bottom: calc(constant(safe-area-inset-bottom) + 275rpx); /* 兼容 iOS < 11.2 */
        bottom: calc(env(safe-area-inset-bottom) + 275rpx); /* 兼容 iOS >= 11.2 */
    }
}

constant() 在 iOS11.2 之后就不能使用

 

你可能感兴趣的:(小程序,HTML5,uni-app)