混合开发笔记5——h5页面在ios刘海屏适配

我会带着你远行 2022-12-02 00:44 494阅读 0赞

## h5页面在ios刘海屏适配 ##

多种，只总结其中一种（官方适配方案）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p1bGlldF94bWo_size_16_color_FFFFFF_t_70_pic_center]  
iOS11同时新增了一个特性，**constant(safe-area-inset-\*)**，这是Webkit的一个CSS函数，用于获取安全区域与边界的距离，有四个预定义的变量（单位px）:

*  safe-area-inset-left：安全区域距离左边界距离，横屏时适配
 *  safe-area-inset-right：安全区域距离右边界距离，横屏时适配
 *  safe-area-inset-top：安全区域距离顶部边界距离，竖屏下刘海屏为44px，iphone6系列20px，竖屏刘海适配关键
 *  safe-area-inset-bottom：安全区域距离底部边界距离，竖屏下为34px，竖屏小黑条适配关键  
    **一般使用 safe-area-inset-top，safe-area-inset-bottom**

### 使用 ###

**（1）html页面头部**  
让页面充满全屏

**（2）css适配**  
使用\*\*@supports\*\*查询机型是否支持constant() / env()实现兼容代码隔离，个别安卓也会成功进入这个判断，因此加上-webkit-overflow-scrolling: touch的判断可以有效规避安卓机。  
**env()** 是为了防止有些机型不支持constant()

@supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top))) and (-webkit-overflow-scrolling: touch) { 
      .fullscreen { 
        /* 适配齐刘海 */
        padding-top: constant(safe-area-inset-top);
        padding-top: env(safe-area-inset-top);
        
        /* 适配底部小黑条 */
        padding-bottom: costant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p1bGlldF94bWo_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/c2689a40c600419c8c2af4f54426d153.png