web-dev-qa-db-fra.com

rendre WKWebview "réel" plein écran sur iPhone X (supprimer la zone de sécurité de WKWebView

J'essaie d'implémenter un "vrai" plein écran dans App WebView, ce qui signifie que je veux que le contenu Web passe complètement sous le cran, peu importe le choix.

C’est la situation à laquelle je suis confronté lors du cadrage de WebView sur les limites de superviews:  wkwebview on iPhone X La bordure rouge est la bordure de la vue Web (également la taille de l'écran). Twitter a 100% de hauteur et de largeur sur le corps.

Je comprends que les sites Web ne peuvent pas avoir 100% de largeur dans Safari et que c’est le comportement par défaut du navigateur d’application pour respecter le safearea, mais en particulier dans mon cas, où les pages Web sont quelque peu conçues pour l’application, je dois utiliser la totalité espace.

Je ne comprenais pas comment configurer la vue Web pour donner à son contenu la taille complète. Y a-t-il un moyen de changer le safearea?

Extrait de code:

private var webView : WKWebView!

override func viewDidLoad() {
    super.viewDidLoad()

    self.webView = WKWebView(frame: .zero)

    self.webView.layer.borderColor = UIColor.red.cgColor
    self.webView.layer.borderWidth = 2

    self.webView.load(URLRequest(url: URL(string: "https://www.Twitter.com")!))

    self.view.addSubview(self.webView)
}

override func viewDidLayoutSubviews() {
    self.webView.frame = self.view.bounds
}
ioswkwebviewiphone-x
7
j0h4nn3s

Après quelques essais et erreurs, voici la solution que j'ai trouvée avec . Sous-classe WKWebView et créez une classe personnalisée. Écraser safeAreaInsets:

import Foundation
import WebKit

class FullScreenWKWebView: WKWebView {
    override var safeAreaInsets: UIEdgeInsets {
        return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    }
}
24
j0h4nn3s

Utilisez plutôt les contraintes AutoLayout:

NSLayoutConstraint.activate([
    webView.topAnchor.constraint(equalTo: view.topAnchor),
    webView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
    webView.leftAnchor.constraint(equalTo: view.leftAnchor),
    webView.rightAnchor.constraint(equalTo: view.rightAnchor)
])

Pensez à ajouter viewport-fit=cover à la balise méta de la page Web de votre page Web et à utiliser les nouvelles variables de Safari pour ajouter du remplissage à votre contenu, afin de vous assurer qu'il respecte les zones sécurisées.

/* iOS 11 */
constant(safe-area-inset-*);
/* iOS 11.2 */
env(safe-area-inset-*);

Modifier

J'explorais également les options permettant d'ajouter la balise méta sans apporter de modification à la page Web. Si je me souviens bien, j'ai réussi à ajouter la méta-tag via Swift avec le code suivant:

webView.evaluateJavascript("document.querySelector('meta[name=viewport]').content = document.querySelector('meta[name=viewport]').content + ', viewport-fit=cover'", completionHandler: nil)

Ceci est pour une utilisation dans une WKWebView au fait, et vous devrez l'exécuter après que la page Web ait été chargée. De plus, une certaine gestion des erreurs devrait probablement être effectuée, car cela lève une exception si une métabalise nommée viewport est manquante et le contenu sera , viewport-fit=cover si le contenu est vide pour commencer.

5
Anders

Vous pouvez également étendre safeAreaInsets à partir de WKWebView. 

extension WKWebView {
    override open var safeAreaInsets: UIEdgeInsets {
        return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    }
}
2
quemeful