lxq.link
postscategoriestoolsabout

H5 在全面屏 IOS 的适配

这里的适配主要说的是IOS webview 的使用场景。

webview 网页默认会在状态栏和底部安全区域保持间距，这样是想让内容能完整的展示在屏幕上，不会被刘海或者底部的白条遮挡。

有时为了增强 H5 页面整体的视觉体验，我们希望将 H5 铺满整个屏幕。

解决方案也很简单，苹果推出全面屏手机之后，在新系统上增加了 viewport-fit 属性

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

viewport-fit 的默认值是 contain, 当设置成 cover，页面就会自动占满整个屏幕。

为了让开发者更好的适配安全区域, 在 ios11 之后系统上，css 新增了 safe-area-*

safe-area-inset-top
safe-area-inset-right
safe-area-inset-bottom
safe-area-inset-right

通过属性名就能很容易的猜测出分别代表着四个方向的安全距离。

如果现在想设置一个底部安全区域的 padding 就可以这样做:

.padding-bottom-safe {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

ios11.0 上新增了 constant，ios11.2发布之后又新增了 env 替代 constant，现阶段为了兼容性，最好将两个属性全设置上，两个属性不会造成冲突，在不支持的系统上会被忽略。

constant 和 env 可以很好的和 calc 搭配使用，所以我们也可以这样设置：

.padding-bottom-with-safe {
  padding-bottom: calc(constant(safe-area-inset-bottom) + 10px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
}

在全面屏 iphone 上，padding 值等于底部安全距离 + 10px;

在其他的支持 calc 的 iphone 和 android 上，都将设置为 10px;

constant 和 env 同样适用于微信小程序。

ios WKWebView 同时设置下面的 CSS 属性会出现问题

html,body {
  height: 100%;
}

我们想让内容高度100%，可是底部出现了间距，间距的高度等于安全区域的高度。

解决办法是将 100% 更改为 100vh

具体原因可以点这里查看

2020-07-30