All geek questions in one place

WKWebView Page Height on iPhone X

I believe that if I use WKWebView with

viewport-fit=cover

and

body :{height:100%}

The html height of the body still cannot reach the bottom of the iPhone X and is equal to the height of safeArea, however, the background color can cover the entire screen.

https://ue.qzone.qq.com/touch/proj-qzone-app/test.html

I am loading this page in full screen WKWebView to reproduce the problem.

+6
source share
4 answers

I managed to fix the problem with (ObjC / Swift):

if (@available(iOS 11.0, *)) {
  webView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
}

or

if #available(iOS 11.0, *) {
    webView.scrollView.contentInsetAdjustmentBehavior = .never;
}

This parameter seems to have the same effect as viewport-fit=cover, therefore, if you know that your content uses this property, you can fix the error as follows.

CSS- env(safe-area-inset-top) . WKWebView , , .

contentInsetAdjustmentBehavior @dpogue , .

+8

,

opacity: 0.5;

html body , body , html , .

, html , :

<html style='height: 812px;'>

, html , :

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

, , .

+1

.

Samantha , 812 , html, . , 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;
        }     
    }
0
source

I found that setting height in CSS for an element htmlis height: 100vh(and not height: 100%) working

0
source

Source: https://habr.com/ru/post/1688794/

More articles:


All Articles