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

2019-09-26 本文已影响0人北辰_狼月

版本信息:
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的基础上应用适配方案。

二. 适配问题

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

浏览器上无效

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       
}

有同学会问，为什么我按照上面书写，为啥在浏览器上没有效果。。。
这里是因为这个属性本身在浏览器上是看不出任何效果的，所以不需要疑惑，你只需要照做，然后去手机上看效果即可

就算使用了上述代码，我的页头仍然会处于最上方
这是因为你是在body中使用的，而hips ui的NavBar组件使用的是fixed布局，top为0，所以不管怎样，它都会脱离文档流，处于页面的最上方

.hips-view__header--fixed {
    position: fixed;
    top: 0;
    left: 0;
}

popup如何适配
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，文章到此为止，希望对大家有所帮助。不足指出，还请指出，相互交流会让我们的方案更加完善。

参考: