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;}}}

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