uni-app tabbar 在小程序上对低于iPhone X的手机存在样式问题

uni-app tabbar 在小程序上对低于iPhone X的手机存在样式问题

测试过的手机：

全部

操作步骤：

wu

预期结果：


wu

实际结果：


wu

bug描述：


uniapp 自带的 tabbar 在 iPhoneX 以及 之后版本有效  

在低于iphoneX后有样式问题

image image


| 信息类别       | 内容               |
|----------------|--------------------|
| 产品分类       | uniapp/App         |
| PC开发环境操作系统 | Windows            |
| HBuilderX类型  | 正式               |
| HBuilderX版本号 | 3.1.17             |
| 手机系统       | 全部               |
| 手机厂商       | 苹果               |
| 页面类型       | vue                |
| 打包方式       | 云端               |
| 项目创建方式   | HBuilderX          |

更多关于uni-app tabbar 在小程序上对低于iPhone X的手机存在样式问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在微信小程序段的tabbar，为微信原生tabbar，有问题可以去微信社区反馈
反馈bug请将产品分类填写正确

更多关于uni-app tabbar 在小程序上对低于iPhone X的手机存在样式问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的兼容性问题，主要原因是iPhone X及后续机型引入了安全区域（Safe Area）概念，而早期机型没有这一设计。

uni-app的tabbar在适配安全区域时，对非全面屏iPhone机型的底部间距处理存在差异。从截图可以看出，tabbar在iPhone 8等机型上距离底部边界的间距异常。

解决方案：

  1. 使用CSS适配：通过env(safe-area-inset-bottom)检测安全区域，为老机型设置固定底部间距：
.tabbar-container {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
  1. 条件编译：针对不同平台设置不同的tabbar高度：
// 在App.vue中动态计算
const isIPhoneX = /iphone/gi.test(navigator.userAgent) && (screen.height >= 812)
回到顶部