vue嵌套app底部导航，安全区相关问题

最新推荐文章于 2025-05-29 12:52:08 发布

hi_JXL

最新推荐文章于 2025-05-29 12:52:08 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue js

本文链接：https://blog.youkuaiyun.com/hi_JXL/article/details/114654126

js 同时被 2 个专栏收录

17 篇文章

订阅专栏

vue

14 篇文章

订阅专栏

本文介绍如何在Vue项目中解决iPhoneX底部tabbar被遮挡的问题，通过修改viewport配置，利用css函数env()和constant()确保底部内容不被安全区域遮挡，并提供JS判断iPhoneX的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目嵌套app,全屏手机，底部tabbar 安全距离设置（被底部黑线遮挡）相关问题

1、index.html 相关配置
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,viewport-fit=cover">
注意：默认不添加扩展是 viewport-fit=contain，需要适配 iPhoneX 必须设置
viewport-fit=cover，这是适配的关键步骤,env 和 constant 只有在 viewport-fit=cover 时候才能生效

2、ios11 增加新特性，webkit 的 css 函数
四个预定义变量为设定安全区域和边界的距离:
safe-area-inset-left：安全区域距离左边边界距离，一般情况下是 0
safe-area-inset-right：安全区域距离右边边界距离，一般情况下是 0
safe-area-inset-top：安全区域距离顶部边界距离，刘海全屏时 top 为 44px
safe-area-inset-bottom：安全区域距离底部边界距离,刘海全屏时bottom 34px

 [1] css 函数 env() 和 constant()函数,都是 webkit 中 css 函数，可以直接使用变量函数，只有在 webkit 内核下才支持;
※ env 函数必须在 ios >= 11.2 才支持
※ constant 函数必须 ios < 11.2 支持

3、兼容css
#app {
  padding-top: constant(safe-area-inset-top); //导航栏+状态栏的高度 88px
  padding-top: env(safe-area-inset-top); //导航栏+状态栏的高度 88px
  padding-left: constant(safe-area-inset-left); //如果未竖屏时为0
  padding-left: env(safe-area-inset-left); //如果未竖屏时为0
  padding-right: constant(safe-area-inset-right); //如果未竖屏时为0
  padding-right: env(safe-area-inset-right); //如果未竖屏时为0
  padding-bottom: constant(safe-area-inset-bottom); //底部高度 34px
  padding-bottom: env(safe-area-inset-bottom); //底部高度 34px
}

4、@media 媒体查询
@mixin iphone-area {
  padding-top: constant(safe-area-inset-top); 
  padding-top: env(safe-area-inset-top); 
  padding-left: constant(safe-area-inset-left);
  padding-left: env(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  padding-right: env(safe-area-inset-right); 
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom); 
}
// iphonex 适配
@mixin iphonex-media {
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    body .phone_box {
      @include iphone-area;
    }
  }
}

5、如果使用 4 无效时，可以用js进行iPhoneX 机型判断
computed: {
    isIphoneX() {
      return (
        /iphone/gi.test(navigator.userAgent) &&(screen.height >= 812 && screen.width >= 375)
      );
    }
  }
 <div class="bottomfixedms" :class="isIphoneX?'b_bottom':''"></div>
 .b_bottom{
 	padding-bottom:50px;
 }