I find that if I use WKWebView with
viewport-fit=cover
and
body :{height:100%}
the height of html body still can not reach the bottom of iPhone X and is equal to the height of safeArea, However, the background-color can cover the fullscreen.
https://ue.qzone.qq.com/touch/proj-qzone-app/test.html
I load this page in a fullscreen WKWebView to reproduce the problem.
I found setting height in CSS on the html element to be height: 100vh (rather than height: 100%) worked
In your code, if you add
opacity: 0.5;
to the html and body tags you'll see that the body tag does take the full screen while the html tag height is only as tall as the safe area.
If you just want the html area to reach the edges you can explicitly set:
<html style='height: 812px;'>
This will make the content within the html properly fit the full screen as long as you also add:
<meta name="viewport" content="initial-scale=1.0, viewport-fit=cover">
Not the most elegant solution of course, but it does work.