微信小程序兼容iphone适配安全区域_小程序 安全区域

背景：

   小程序页面底部在ios中会有小黑条遮挡

上代码：

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

项目描述：

  微信小程序是通过 webview 组件嵌入H5网页，需要解决适配安全区域问题。

 首先无法在微信小程序内做任何操作，因为 webview 添加padding-bottom样式无效，且webView会自动铺满整个小程序页面，需要在嵌入的H5内做样式处理，添加以上代码后在微信开发者工具中有效果，但在真机预览无效，需要在 meta 中添加 viewport-fit=cover ：

<meta name="viewport" content="width=device-width, initial-scale=1,viewport-fit=cover">

成功