VUE项目底部tab切换如何解决在iPhoneX和iPhoneX Max 的底部小黑条挡住的问题

Zhang_web806

于 2024-06-03 08:00:15 发布

阅读量173

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Zhang_web/article/details/139401617

版权

最近在移动端项目上遇到了底部tab切换被iPhoneX 和 iPhoneX Max 的小黑条影响到的问题，经过多次调试，最终的解决方案如下：

1. 新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口

（千万不要忘了，不然后面样式都没效果）

<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width,viewport-fit=cover">

2.页面主体内容限定在安全区域内

body {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

3.fixed 元素的适配

/*iphoneX*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .van-tabbar--fixed{
          padding-bottom: 10px !important;
          padding-bottom: constant(safe-area-inset-bottom);
          padding-bottom: env(safe-area-inset-bottom);
      }
}
/*iphoneX Max*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
    .van-tabbar--fixed{
          padding-bottom: 10px !important;
          padding-bottom: constant(safe-area-inset-bottom);
          padding-bottom: env(safe-area-inset-bottom);
      }
}

以上就解决了