版本信息:
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，文章到此为止，希望对大家有所帮助。不足指出，还请指出，相互交流会让我们的方案更加完善。
参考:
网友评论