web-dev-qa-db-fra.com

Problème de hauteur de page WKWebView sur iPhone X

Je trouve que si j'utilise WKWebView avec 

viewport-fit=cover

et 

body :{height:100%}

la hauteur du corps html ne peut toujours pas atteindre le bas de l'iPhone X et est égale à la hauteur de safeArea. Toutefois, la couleur d'arrière-plan peut couvrir le plein écran.

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

Je charge cette page dans un WKWebView en plein écran pour reproduire le problème.

ioscssios11wkwebviewiphone-x
7
WATER1350

J'ai pu résoudre le problème avec (ObjC/Swift):

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

ou

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

Ce paramètre semble avoir le même effet que viewport-fit=cover. Ainsi, si vous savez que votre contenu utilise la propriété, vous pouvez corriger le bogue de cette façon.

Les déclarations CSS env(safe-area-inset-top) fonctionnent toujours comme prévu. WKWebView détecte automatiquement les intersections de sa fenêtre avec des zones bloquées et définit les valeurs en conséquence.

Documentation pour contentInsetAdjustmentBehavior et ses valeurs de paramètre et bravo à @dpogue pour la réponse à la question où j'ai trouvé la solution.

11
Sampo

Dans votre code, si vous ajoutez 

opacity: 0.5; 

pour les balises html et body, vous verrez que la balise body prend tout l'écran alors que la hauteur de la balise html est aussi grande que la zone sécurisée. 

Si vous voulez juste que la zone html atteigne les bords, vous pouvez définir explicitement: 

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

Cela rendra le contenu du code html correctement en plein écran si vous ajoutez également: 

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

Ce n’est certes pas la solution la plus élégante, mais cela fonctionne. 

1
Samantha John

J'ai trouvé que régler la hauteur en CSS sur l'élément html était height: 100vh (plutôt que height: 100%) travaillé

1
Adam Heath

Je suis passé à travers ce problème dans mon application Cordova.

La solution de Samantha a fonctionné dans une certaine mesure pour moi, mais le fait d'avoir une hauteur de 812 pixels dans la balise html posait problème en paysage et avec d'autres appareils. Finalement, j'ai découvert que cibler uniquement l'écran de la taille de l'iPhone X avec des requêtes de support CSS pour les paysages et les portraits convenait parfaitement. 

Les valeurs de pixels de largeur et de hauteur devaient être déclarées comme importantes pour que l'iPhone les accepte.

@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
Michael Sibley