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

布满荆棘的人生 2023-08-17 15:17 106阅读 0赞

**版本信息:**  
hips ui: 0.1.43

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

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

### 一. 无适配情况 ###

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

#### 1.头尾嵌入边框 ####

![IMG\_3826.PNG][IMG_3826.PNG]

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

![IMG\_3827.PNG][IMG_3827.PNG]

#### 3.适配了iPhoneX，却没有适配iPhoneXs Max ####

如果，你遇到过以上几种情况，那么就看过来，这篇文章就是为了让你解决诸如此类的问题而诞生的。  
首先关于iPhoneX的适配问题，网上有很多文章，其中不乏优秀者，说的详细透彻，这里推荐几篇  
[H5页面如何适配iPhone X ？腾讯设计师给出了通用解决方案][H5_iPhone X]  
[https://www.jianshu.com/p/438c7c2e5664][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       
    }

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

1.  就算使用了上述代码，我的页头仍然会处于最上方  
    这是因为你是在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 ####

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

**参考**:

*  [iPhone X的缺口和CSS][iPhone X_CSS]
 *  [前端 iPhoneX适配][iPhoneX]
 *  [关于H5页面在iPhoneX适配][H5_iPhoneX]
 *  [H5页面如何适配iPhone X ？腾讯设计师给出了通用解决方案！][H5_iPhone X 1]
 *  [H5 IphoneX 适配简述][https_www.jianshu.com_p_438c7c2e5664]

转载于:https://www.cnblogs.com/yky-iris/p/11505538.html

[IMG_3826.PNG]: /images/20230810/e869213e62a94b4b8e299bac43b529e1.png
[IMG_3827.PNG]: /images/20230810/732ea3942ca54f188c0fda469ebc3d96.png
[H5_iPhone X]: http://www.uisdc.com/h5-ui-iphonex-adaptation
[https_www.jianshu.com_p_438c7c2e5664]: https://www.jianshu.com/p/438c7c2e5664
[iPhone X_CSS]: https://www.w3cplus.com/css/the-notch-and-css.html
[iPhoneX]: https://www.jianshu.com/p/9a158083a598
[H5_iPhoneX]: https://www.cnblogs.com/lolDragon/p/7795174.html
[H5_iPhone X 1]: https://www.uisdc.com/h5-ui-iphonex-adaptation