当前位置:   article > 正文

小程序开发 uni-app 获取底部安全区域适配苹果底部黑条及IOS系统的坑_uni-app css获取安全区

uni-app css获取安全区

在小程序的开发中,需要适配不同机型的安卓和苹果,此文章讲解在适配苹果IOS系统踩过的坑。

1、margin-bottom属性

页面最底部的元素,例如图片中的按钮,如果想要距离底部有50rpx,按照常规写法margin-bottom:50rpx;,安卓手机则会正常显示,苹果手机不生效,系统自带的白条/黑条会挡住部分按钮。
解决办法:
a.对于不影响元素本身的情况,则将margin-bottom改为padding-bottom,会撑起距底部的距离(图中按钮情况就不适用,会撑起按钮的高度)
b.给按钮元素添加一个父元素设置高度,或添加的父元素添加padding-bottom
在这里插入图片描述

2、苹果手机获取底部安全距离

通常使用env(safe-area-inset-bottom)来获取底部安全区域的高度,从而适配 iPhone X 及以上的设备。不过,在 Android 设备上,env(safe-area-inset-bottom) 返回的值是 0,因此需要使用其他方式来适配底部安全区域。
兼容 iOS 设备: constant(safe-area-inset-bottom)
兼容 iPhone X 及以上设备: env(safe-area-inset-bottom)
在使用时可按照以下顺序书写:

.container {
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS 设备 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iPhone X 及以上设备 */
}
  • 1
  • 2
  • 3
  • 4

如果想在底部安全区域的高度上再添加50px,那么可按照以下方式书写:

  padding-bottom: calc(env(safe-area-inset-bottom) + 50px); /* 底部安全区域高度加 50px 的高度 */
  • 1

3、组件全屏显示

例如在小程序中点击出现弹窗,弹窗需要一个全屏显示的背景蒙层,蒙层设置宽高100%是不生效的,需要设置宽高为vw和vh,如下代码:

.container {
  width:100vw;
  height:100vh;
}
  • 1
  • 2
  • 3
  • 4

在这里插入图片描述
如果对你有所帮助,请记得一键三联哦

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/152960
推荐阅读
相关标签
  

闽ICP备14008679号