关于webview:小程序webview嵌入h5兼容iphonex安全区域

阐明：

1. 本文小程序专指 微信小程序
2. iphonex: 实指 iphonex 及后续刘海屏机器
3. 平安区域: 本文特指底部平安区域

要做的事件

如何在小程序 webview 加载 h5 页面以及应用 webview 的益处本文不做赘述，文本次要解决为了解决：间接关上 h5 页面中能够失常适配 iphonex 平安区域，待 h5 嵌入到小程序的 webview 中后不起作用，次要解决 h5 页面在小程序 webview 中适配 iphonex 的问题。

问题体现

h5 独自页面浏览时候，能够适配 iphonex 的底部平安区域（左图），嵌入小程序后适配有效（右图仅 h5 示例）

网上查看了解决方案大略有：

1. 在小程序里判断以后是否为 iphonex，而后将参数拼接到 url 上，在 h5 里承受参数，独自减少一个款式，如 iphonex-fix

.iphonex-fix {padding-bottom: 34px/64rpx;}

2. 通过媒体查问，判断以后设施尺寸来确定

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

3. 应用苹果官网推出适配计划 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)");
    }
  
  }

}