注：本文中的小程序特指微信小程序iphonex：实际指iphonex及后续刘海屏机器的安全区：本文特指小程序webview中底部安全区如何操作加载h5页面和使用webview的好处本文不再赘述。文中主要解决问题：直接打开h5页面可以正常适配iphonex安全区，在小程序的webview中嵌入h5后就不行了。主要是解决h5页面小程序webview适配iphonex的问题。问题表现在查看h5单页时，可以适配iphonex的底部安全区域（左图），但嵌入小程序后适配无效（右图仅以h5为例）。对于iphonex，则将参数拼接到url，接受h5中的参数，单独添加样式，如iphonex-fix.iphonex-fix{padding-bottom:34px/64rpx;}通过判断当前设备的大小媒体查询@mediaonlyscreenand(min-device-width:375px)and(max-device-width:415px)and(min-device-height:812px)and(max-device-height:897px)and(-webkit-min-device-pixel-ratio:2){.iphonex-fit{padding-bottom:34px;}使用苹果官方的适配方案css函数env()、constant()进行适配（推荐），具体实现可以参考https://www.cnblogs.com/cangq...@supports（下：constant(safe-area-inset-bottom))or(bottom:env(safe-area-inset-bottom)){@action-button-height:60px;.my__container{padding-bottom:calc(~"@{action-button-height}+constant(safe-area-inset-bottom)");padding-bottom:calc(~"@{action-button-height}+env(safe-area-inset-bottom)");}.my__action{padding-bottom:calc(~"@{action-button-height}+constant(safe-area-inset-bottom)");padding-bottom:calc(~"@{action-button-height}+env(safe-area-inset-bottom)");}}本文也是毫不犹豫的选择了3种方案，嵌入小程序后发现问题是单独h5显示正常，放在微信开发者工具中就不正常了，webview无法调试比如chrome浏览器。由于交付压力，我转而使用第二种方案，但我愿意。.问题的转折点在于无意中发现了最新版的开发者工具。webview页面中有一个额外的调试器按钮。点击后发现可以调试内嵌的h5页面。在小程序下可以生效，但是由于样式优先级问题被覆盖了。解决方法是在支持安全区域的模型上增加css权重，嵌套my-wrap@supports(bottom:constant(safe-area-inset-bottom))or(bottom:env(safe-area-inset-bottom)){//增加类weight.my-wrap{@action-button-height:60px;.my__container{padding-bottom:calc(~"@{action-button-height}+constant(safe-area-inset-bottom)");padding-bottom:calc(~"@{action-button-height}+env(safe-area-inset-bottom)");}.my__action{padding-bottom:calc(~"@{action-button-height}+constant(safe-area-inset-bottom)");padding-bottom:calc(~"@{action-button-height}+env(safe-area-inset-bottom)");}}}
