vue嵌套app底部导航，安全区相关问题_vue打包成app后ios底部安全区域晃动

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 时候才能生效
1
2
3
4

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 支持
1
2
3
4
5
6
7
8
9
10

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
}

1
2
3
4
5
6
7
8
9
10
11
12

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;
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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;
 }
1
2
3
4
5
6
7
8
9
10
11
12