制作WKWebview＆＃34;真实＆＃34; iPhone X全屏（从WKWebView删除安全区域

Question

我试图实现一个真实的＆＃34;在App WebView中全屏，这意味着无论如何我都希望webcontent完全处于缺陷之下。

当我将WebView构建到超级视图边界时，这是我面临的当前情况： 红色边框是webView的边框（也是屏幕的大小）。 Twitter的身高和宽度均为100％。

据我所知，网站在Safari中的宽度不能达到100％，并且它在应用程序浏览器中的默认行为是尊重安全区，但特别是在我的情况下，网页有点为应用程序设计，我需要使用整个空间。

我无法弄清楚如何设置webview以使其内容达到最大尺寸。有没有办法改变安全区？

代码段：

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
}

Answer 1

经过一番尝试和错误后，这就是我提出的解决方案。 子类WKWebView并创建一个自定义类。覆盖safeAreaInsets：

import Foundation
import WebKit

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

Answer 2

改为使用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)
])

请务必将viewport-fit=cover添加到您网页的视口元标记中，并使用Safari的新变量为您的内容添加填充，以确保其尊重安全区域。

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

修改

我还在探索添加元标记的选项，而不对实际网页进行任何更改。如果我没记错的话，我确实成功地通过Swift使用以下代码添加元标记：

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

顺便说一下，这是在WKWebView中使用的，你需要在网页明显加载后执行它。此外，还应该进行一些错误处理，因为如果缺少名为viewport的元标记，则会抛出异常，如果内容为空，则内容将为, viewport-fit=cover。

Answer 3

您还可以从WKWebView扩展safeAreaInsets。

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

Answer 4

这是另一种不覆盖并执行javascript的解决方案：

webView.scrollView.contentInsetAdjustmentBehavior = .never

就我而言，效果很好。

Answer 5

只需在您的网页标题“ viewport-fit = cover”中添加一个元元素

像这样：

meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,viewport-fit=cover"

Answer 6

对于目标C，请尝试以下代码-

brew uninstall haskell-stack