logo 有点东西

uni-app iOS小程序底部安全区适配

线上反馈小程序在iOS 12以上版本出现了底部导航栏被刘海屏小黑条遮挡的现象。

排查tabbar组件的样式适配，第一眼并没有感觉有什么问题。safe-area-inset-bottom变量用了，env和constant兼容也做了，看着没有问题。

1
2
3
4
5
6
.ios-safe-wrap{
  width: 100%;
  height: 1px;
  padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
  padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
}

以为是微信小程序更新了之后某些兼容写法失效了，在查询资料的时候翻到了这篇帖子：《微信小程序中安全区域计算和适配》，里面也提到了一样的适配方法，但结尾还多了一句“Tips：constant和env不能调换位置”，然后一看他的案例：

1
2
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/

擦，原来是写反了，遂改。

uni-app iOS小程序底部安全区适配

作者：有点东西

链接： https://www.youdiandongxi.com/article/uniapp-ios-safe-area-adaptation.html

协议：本文采用 CC BY-NC-SA 4.0 隐私协议，转载请注明出处！

上一篇：《1Panel v1.10.10-lts容器重启后链接不上Mysql》 下一篇：《Logo更替完成：设计思路解析》

其他推荐内容

net::ERR_UNSAFE_PORT的问题
  • 2021/03/15
    • 运维

net::ERR_UNSAFE_PORT的问题

IOS中WebViewJavascriptBridge桥接获取不到数据的问题
  • 2018/10/18
    • 编程

IOS中WebViewJavascriptBridge桥接获取不到数据的问题

v-for创建重复组件导致重复请求接口的BUG
  • 2021/04/25
    • 编程

v-for创建重复组件导致重复请求接口的BUG

评论区