vue项目在iPhoneX上的底部tab切换被小黑条遮挡问题

在修改公司以前的项目中,遇到了vue移动端在iphoneX上底部tab栏被遮挡的问题。在查网上,有很多方法,苹果也给出了开发建议,几乎都试了一圈。

在项目中因为底部tab栏在iphonex的显示问题

  1. 方法一(这是我最终用的方法,实际应用中,我是在底部加了一个空div,撑起来的,单独给#app加一个padding,在吸附在底部的tab上不是很好用)
@media only screen and (width: 375px) and (min-height: 690px){
  #app {
     padding-bottom: 0.34rem;
   }
 }
  1. 方法二(我首选这个方法,因为看起来高大上,但是我在我的项目中使用没有生效,不知道为啥,该加的都加了还是不好用!!)

第一步:新增 viweport-fit 属性,使得页面内容完全覆盖整个窗口:


第二步:页面主体内容限定在安全区域内

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

第三步:fixed 元素的适配

  • 类型一:fixed 完全吸底元素(bottom = 0)
{
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
  • 类型二:fixed 非完全吸底元素(bottom ≠ 0),比如 “返回顶部”、“侧边广告” 等
{
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}


文章参考:https://www.jianshu.com/p/578db27f0adf
 

你可能感兴趣的:(Vue)