web-dev-qa-db-ja.com

iPhone XでWKWebviewを「実際の」フルスクリーンにする（WKWebViewから安全な領域を削除する

App WebViewに「本当の」フルスクリーンを実装しようとしています。つまり、Webコンテンツが何であれノッチの下に完全に収まるようにしたいのです。

これは、WebViewをスーパービューの境界にフレーミングするときに直面している現在の状況です。 wkwebview on iPhone X 赤い枠線はwebViewの枠線です（画面のサイズも）。 Twitterの体の高さと幅は100％です。

Safariではウェブサイトの幅を100％にすることはできず、セーフエリアを尊重するためのアプリブラウザのデフォルトの動作ではないことを理解していますが、特に私の場合は、ウェブページがアプリ用にある程度設計されているため、フルを使用する必要がありますスペース。

コンテンツをフルサイズにするためにウェブビューを設定する方法がわかりませんでした。セーフエリアを変更する方法はありますか？

コードスニペット：

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
13
j0h4nn3s

少し試行錯誤した後、これが私が思いついた解決策です。 WKWebViewをサブクラス化し、カスタムクラスを作成します。 safeAreaInsetsを上書きします：

import Foundation
import WebKit

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

WKWebViewからsafeAreaInsetsを拡張することもできます。

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

代わりに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)
])

Webページのビューポートメタタグにviewport-fit=coverを追加し、Safariの新しい変数を使用してコンテンツにパディングを追加し、安全な領域を尊重するようにしてください。

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

編集

また、実際のWebページを変更せずにメタタグを追加するためのオプションを検討していました。正しく覚えていれば、次のコードでSwiftを使用してメタタグを追加できました。

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

ちなみにこれはWKWebViewで使用するためのものであり、Webページが明らかにロードされた後に実行する必要があります。また、viewportという名前のメタタグが欠落している場合は例外がスローされ、コンテンツが最初から空の場合はコンテンツが, viewport-fit=coverになるため、いくつかのエラー処理を行う必要があります。

5
Anders