阐明：
- 本文小程序专指 微信小程序
- iphonex: 实指iphonex及后续刘海屏机器
- 平安区域: 本文特指底部平安区域
要做的事件
如何在小程序webview加载h5页面以及应用webview的益处本文不做赘述，文本次要解决为了解决：间接关上h5页面中能够失常适配iphonex平安区域，待h5嵌入到小程序的webview中后不起作用，次要解决h5页面在小程序webview中适配iphonex的问题。
问题体现
h5独自页面浏览时候，能够适配iphonex的底部平安区域（左图），嵌入小程序后适配有效（右图仅h5示例）
网上查看了解决方案大略有：
- 在小程序里判断以后是否为iphonex，而后将参数拼接到url上，在h5里承受参数，独自减少一个款式，如iphonex-fix
.iphonex-fix { padding-bottom: 34px/64rpx;}- 通过媒体查问，判断以后设施尺寸来确定
@media only screen and (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 (bottom: 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浏览器进行debugger。迫于交付压力，改用了第2种计划，然而又甘心啊。。
问题的转折点在于偶尔发现最新版的开发者工具，在webview页面中多了一个debugger按钮，点开发现居然能够调试嵌入的h5页面了
解决形式
通过排查发现，通过第三种办法写的css，在小程序下是能够失效的，然而因为款式优先级问题被笼罩掉了。
解决方案就是在反对平安区域的机型上，减少css权重，在外层嵌套了my-wrap
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { // 减少class权重 .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)"); } }}