H5内嵌在IOS的Webview中适配刘海屏CSS解决方案

摘要
本文的出发点是对iOS设备中内嵌了h5页面，刘海屏显示问题在H5端做的适配方案。

环境
IOS刘海屏webview内嵌h5页面
编辑工具HBuild X

初始安全区域，如下图，红框

适配代码如下

@supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top))) and (-webkit-overflow-scrolling: touch) {
            body{
                background:black !important;
            }
            #youxi1{
                /* 适配齐刘海 */      
                padding-top: costant(safe-area-inset-top) !important;           
                padding-top: env(safe-area-inset-top) !important; 

                /* 适配底部小黑条 */				
               padding-bottom: -costant(safe-area-inset-bottom) !important;
                padding-bottom: -env(safe-area-inset-bottom) !important;
            }

            /* iphone x / xs / 11 pro对于刘海屏的安全区域增加h5的高度*/
            @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
                #youxi1{
                    height: 820px !important;
                }
            }
			
            /* iphone xr / 11对于刘海屏的安全区域增加h5的高度 */
            @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
                #youxi1{
                    height: 900px !important;
                }
            }
			
            /* iphone xs max / 11 pro max对于刘海屏的安全区域增加h5的高度 */
            @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
                #youxi1{
                    height: 900px !important;
                }
            }

        }

结语：
欢迎加入微信群一起学习讨论!