适用于hips ui的iPhoneX及以上适配方案

版本信息:
hips ui: 0.1.43

须知:
随着hips ui的迭代,可能会解决适配问题,所以下面的方案是有时效性的。

如果你项目上很紧急,可以直接看第三部分解决方案,复制粘贴代码即可。

一. 无适配情况

自从iPhone X出了刘海屏后,对于我们前端是适配难度又更上一层楼。不知道你有没有遇到过如下情况

1.头尾嵌入边框

IMG_3826.PNG

2.在适配了头尾之后,scroll框子没做适配,出现最后的内容别下方小黑条遮住的情况

IMG_3827.PNG

3.适配了iPhoneX,却没有适配iPhoneXs Max

如果,你遇到过以上几种情况,那么就看过来,这篇文章就是为了让你解决诸如此类的问题而诞生的。
首先关于iPhoneX的适配问题,网上有很多文章,其中不乏优秀者,说的详细透彻,这里推荐几篇
H5页面如何适配iPhone X ?腾讯设计师给出了通用解决方案
https://www.jianshu.com/p/438c7c2e5664
他们都讲述的很好,我就不画蛇添足,再去copy一份了。我们要说的是怎样在hips ui的基础上应用适配方案。

二. 适配问题

首先,抛出几个可能会令大家困惑不解的几个问题

  1. 浏览器上无效
body {
    padding-top: constant(safe-area-inset-top);   //为导航栏+状态栏的高度 88px            
    padding-left: constant(safe-area-inset-left);   //如果未竖屏时为0                
    padding-right: constant(safe-area-inset-right); //如果未竖屏时为0                
    padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px       
}

有同学会问,为什么我按照上面书写,为啥在浏览器上没有效果。。。
这里是因为这个属性本身在浏览器上是看不出任何效果的,所以不需要疑惑,你只需要照做,然后去手机上看效果即可
2. 就算使用了上述代码,我的页头仍然会处于最上方
这是因为你是在body中使用的,而hips ui的NavBar组件使用的是fixed布局top为0,所以不管怎样,它都会脱离文档流,处于页面的最上方

.hips-view__header--fixed {
    position: fixed;
    top: 0;
    left: 0;
}
  1. popup如何适配
  2. scroll组件的高度如何计算

三. 解决方案

好!了解了上述诸多问题后,我们直接上代码。

No.1 index.html

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

增加viewport=cover

No.2 _iosFit.styl

.hips-view {
  padding-top: constant(safe-area-inset-top) !important;
  padding-top: env(safe-area-inset-top) !important;
  padding-bottom: constant(safe-area-inset-bottom) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
}

.hips-view__header--fixed {
  padding-top: constant(safe-area-inset-top) !important;
  padding-top: env(safe-area-inset-top) !important;
}

.hips-view__footer {
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}

.hips-popup--bottom, .hips-overlay {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

既然在body中无效,那我们就在hips ui的hips-view类中加上下间距,既然页面头是绝对定位,那我们就在hips-view__header--fixed中加上下间距,这样我们就解决了适配问题中的两个问题。
然后我们还需要注意其他的一些点,比如View组件的footer,popup组件,我们都要加上响应代码。
至此,我们解决了适配问题的前三个

No.3 滚动条的高度

我们知道在hips ui的scroll组件最外层,是需要加一个div,然后附上固定的height的,这个height当然也是需要考虑iphonex上的padding的,代码如下

.scroll-box {
    height: calc(100vh - 13.333vw)
    height: calc(100vh - 13.333vw - constant(safe-area-inset-top) - constant(safe-area-inset-bottom))
    height: calc(100vh - 13.333vw - env(safe-area-inset-top) - env(safe-area-inset-bottom))
  }

上述代码是针对页面只有有一个页头的情况,大家还需根据具体情况减去相应的值

No.4 iPhoneXs Max的适配

因为css的constant函数和env函数在ios11以上已支持,所以我们实际上不需要把代码写在媒体属性里,这样的话,safe-area-inset-top只要这个值有效,那么就会应用上,无效自然没有效果。所以以后我们就不需要专门为iPhoneXs Max或新出的机型写额外的适配代码,一套代码搞定全部。

ok,文章到此为止,希望对大家有所帮助。不足指出,还请指出,相互交流会让我们的方案更加完善。

参考:

posted @ 2019-09-11 12:08  北辰狼月  阅读(447)  评论(0编辑  收藏  举报