请选择 进入手机版 | 继续访问电脑版
搜索
房产
装修
汽车
婚嫁
健康
理财
旅游
美食
跳蚤
二手房
租房
招聘
二手车
教育
茶座
我要买房
买东西
装修家居
交友
职场
生活
网购
亲子
情感
龙城车友
找美食
谈婚论嫁
美女
兴趣
八卦
宠物
手机

小程序以及H5页面上IphoneX底部安全区域小黑条适配问题

[复制链接]
查看: 102|回复: 0

2万

主题

2万

帖子

7万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
75491
发表于 2020-9-17 03:53 | 显示全部楼层 |阅读模式
背景


  • 公司项目开发中,发现iPhoneX上吸底元素存在被小黑条遮挡的问题
原因


  • 在苹果 iPhoneX 、iPhone XR等机型上,物理Home键被取消,改为底部小黑条替代home键功能,从而导致吸底元素会被小黑条遮挡覆盖的问题
解决方案


  • 使用已知底部小黑条高度为34px/68rpx机型适配(不建议)
  • 使用微信官方API,getSystemInfo()中的safeArea对象进行适配(建议)
  • 使用苹果官方推出的css函数env()、constant()来适配 (建议)
安全区域

看看图就明白了,中间绿色区域即为安全区域。也就是说,适配安全区域也就是让小程序或者H5的内容显示在绿色区域部分。
我的关键词 小程序以及H5页面上IphoneX底部安全区域小黑条适配问题  新闻咨询 1714595-20200418103806360-36496158

第一种,使用已知安全距离进行适配34px/68rpx(不建议)

小程序app.js文件中判断获取当前设备机型,如果是iphoneX系列机型,那么设计到底部时,则考虑设置底部按钮或选项卡的margin-bottom、padding-bottom、height等,或者添加一个div来占位小黑条的位置。
第二种 getSystemInfo()


  • 1 使用wx.getSystemInfoSync()中的screenHeight和safeArea对象的bottom属性判断
    这里使用screenHeight是获取屏幕的高度,因为bottom是以屏幕左上角为原点开始计算的,所以需要的是屏幕高度,对比screenHeight和safeArea,如果相等则说明不需要适配,不相等则需要适配。
    `const isIPhoneX = () => {
    let screenHeight = wx.getSystemInfoSync().screenHeight
    let bottom = wx.getSystemInfoSync().safeArea.bottom
    return screenHeight !== bottom
}`
注意  isIPhoneX 返回true则代表不想等,需要进行适配

底部选项卡或吸底元素样式判断
底部选项卡或吸底元素

  • 2 safeArea对象获取底部小黑条的高度,全局存储使用
    我的关键词 小程序以及H5页面上IphoneX底部安全区域小黑条适配问题  新闻咨询 1714595-20200418105428881-1050364937

第三种 使用苹果官方推出的css函数env()、constant()来适配 (建议)我也用的这种


  • env()和constant(),是IOS11新增特性,Webkit的css函数,用于设定安全区域与边界的距离,有4个预定义变量:

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

这里我们只需要关注safe-area-inset-bottom就行了

而env()和constant()函数有个必要的使用前提,H5网页设置viewport-fit=cover的时候才生效,小程序里的viewport-fit默认是cover

  • 使用案列
    我的关键词 小程序以及H5页面上IphoneX底部安全区域小黑条适配问题  新闻咨询 1714595-20200418110043143-141301532

    下图为一个吸底元素,在iphoneX真机上小黑条会遮挡,大概长这样
    我的关键词 小程序以及H5页面上IphoneX底部安全区域小黑条适配问题  新闻咨询 1714595-20200418110153093-649524314

  • 解决方案
    `.detailBotoom{
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    height: calc(96rpx+ constant(safe-area-inset-bottom));///兼容 IOS11.2/
    background: #fff;
    border-top: 1rpx solid #eaeef1;
    z-index: 99;
    padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS11.2/
}`
注意 constant与env顺序不能改变,先constant再env


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

技术支持:迪恩网络科技公司  Powered by Discuz! X3.2
快速回复 返回顶部 返回列表