IOS刘海屏安全区域适配

H5在iOS上的滚动兼容问题:

为了防止body跟着滚动需设置:

body{

    overflow: hidden;

}

为了防止body中的div设置height:100%撑不开

Body {

position: absolute;

          left: 0;

          top: 0;

          right: 0;

          bottom: 0;

}

兼容刘海屏

    <meta

      name="viewport"

      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"

    />

另外需要设置容器高度为height: 100vh 否则height: 100%为不包含安全区域的高度

去除滚动条

显示设置为

overflow-y: scroll;

*::-webkit-scrollbar {

        width: 0;

        height: 0;

        display: none;

      }

      *::-webkit-scrollbar:horizontal {

        width: 0;

        height: 0;

        display: none;

      }

以上两者缺一不可

iPhon12(含)以上机型从HTTP缓存中获取的H5会出现内容展示不出来的问题

原因: lib-flexible库获取屏幕宽度为0,导致html的font-size: 0px 所以REM适配方案失效

解决:

1.修正lib-flexible库获取宽度时机

2.放弃REM适配,改用VW适配

推荐解决方案2