在iPhone X上使WKWebview"真实"全屏(从WKWebView中删除安全区域

Question

我正在尝试在App WebView中实现一个"真正的"全屏,这意味着无论如何我都希望webcontent完全处于缺陷之下.

这是我面临的当前情况,当将WebView构建到超级视图边界时: 红色边框是webView的边框(也是屏幕的大小).Twitter在身体上有100%的高度和宽度.

据我所知,网站在Safari中不能有100%的宽度,而且它在App浏览器中的默认行为是尊重安全区,但特别是在我的情况下,网页有点为应用程序设计,我需要使用完整的空间.

我无法弄清楚如何设置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

这是另一种无需覆盖和执行 javascript 的解决方案：

webView.scrollView.contentInsetAdjustmentBehavior = .never

就我而言，效果很好。

Objective-C 版本：

[webView.scrollView setContentInsetAdjustmentBehavior: UIScrollViewContentInsetAdjustmentNever];

Answer 3

您还可以从WKWebView扩展safeAreaInsets。

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

Answer 4

改为使用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缺少一个名为metatag 的内容,则会抛出异常,, viewport-fit=cover如果内容为空,则内容将会开始.

Answer 5

只需在网页头部添加一个元元素“viewport-fit=cover”

像这样：

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