iPhone X上的WKWebView页面高度问题
我发现如果我用WKWebView
viewport-fit=cover 和
body :{height:100%}
html body的高度仍然达不到iPhone X的底部，等于safeArea的高度，但背景色可以覆盖全屏。
https://ue.qzone.qq.com/touch/proj-qzone-app/test.html
我在一个全屏的WKWebView中加载这个页面来重现这个问题。
我在我的cordova应用程序中解决了这个问题。
Samantha的解决scheme在某种程度上为我工作，但在html标签中设置的高度为812px，导致在横向和其他设备上出现问题。 最终我发现，只针对iPhone X大小的屏幕与横向和纵向的CSS媒体查询做了伎俩。
宽度和高度像素值需要被声明为重要的，以便iPhone接受它们。
@media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait) { html { height: 812px !important; width: 375px !important; } } @media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : landscape) { html { width: 812px !important; height: 375px !important; } }
在你的代码中，如果你添加
opacity: 0.5;
到html和body标签，你会发现body标签确实占据了整个屏幕，而html标签的高度只有安全区域的高度。
如果你只是希望html区域达到边缘，你可以明确地设置：
<html style='height: 812px;'>
这将使html内容适合整个屏幕，只要你还添加：
<meta name="viewport" content="initial-scale=1.0, viewport-fit=cover">
当然不是最优雅的解决scheme，但它确实有效。