H5页面如何适配iPhone X ？腾讯设计师给出了通用解决方案！

正文

请到「今天看啥」查看全文

三. 关于安全区域

这里可能有人会有疑问，为什么非通栏下的页面内容是通到底部的，而按钮却是在安全区域上方呢？

这个问题涉及到安全区域， iOS11 和先前版本的不同之处在于，webview 比较重视安全区域了。 这意味着，如果给页面元素设置 top : 0，它会渲染在屏幕顶部的44px之下，也就是状态栏下面。如果给页面元素设置 bottom : 0，它会渲染在屏幕底部的34px之上，也就是底部安全区域上面。

为了解决这个尴尬的情况，苹果公司给我们提供了一个设置 Viewport的 Meta 标签的解决方案。

Viewport 可以设置的选项就是 Viewport—fit，它有三个可选值：

• Contain：The viewport should fully contain the web content. 可视窗口完全包含网页内容。

• Cover：The web content should fully cover the viewport. 网页内容完全覆盖可视窗口。

• Auto：The default value，同 Contain 的作用。

通过给页面设置Viewport—fit=cover，可以将页面的布局区域延伸到页面顶部和底部。

对于通栏页面，设置了Viewport—fit 的属性，发现会不生效，经过跟同事查看手 Q 源码后发现，终端对于 WebView 通栏的情况设置了UIScrollViewContentInsetAdjustmentNever属性，去除了上下安全区域的边距，使得安全区域的上下边距失效了。

另外提一点，经过 2 个版本的 Webview 测试，发现 WKWebview 在渲染页面的时候，底部按钮在位置表现上不一致，可能是一个还未解决的 Bug：

请到「今天看啥」查看全文