Question

我一直在无休止地寻找有效的答案。我正在尝试创建一个非常简单的WKWebView应用程序来包装Web应用程序。由于导航控件都在应用程序中，因此我不需要任何花哨的东西。

目前我的ViewController.swift文件如下所示：

https://gist.github.com/andrewweaver/4a0e13245f185e8f31ba812b91f7dddd

Swift版本： Apple Swift version 3.1 (swiftlang-802.0.53 clang-802.0.42)

问题是状态栏的填充，我想调整它，以便状态栏不在内容之上，如下所示：

任何帮助都会非常感激，因为我对iOS开发很新。我还希望能够更改状态栏颜色，但目前不是一个直接关注的问题。

Answer 1

要完全在HTML / CSS中执行此操作（这将涉及您控制HTML），您需要将viewport-fit=cover添加到元viewport标记。这告诉设备您希望webview填满整个屏幕，包括“安全区域”（例如状态栏后面）。

但是你还需要动态调整你的填充以处理iPhone X，它具有更大的状态栏区域，并包括扬声器和摄像头的凹口。

幸运的是，Apple为安全区域插入暴露了一些CSS常量，因此您可以利用CSS中的那些：即，padding-top: constant(safe-area-inset-top);

我写了更多关于这个场景以及适用于iOS 11和iPhone X的新CSS功能：https://ayogo.com/blog/ios11-viewport/

如果无法控制正在加载的HTML / CSS，则可以禁用网络视图的安全区域行为：

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

请注意，在iPhone X上，这可能会导致内容无法访问并被缺陷遮挡。

Answer 2

我使用autolayout约束解决了这个问题，请检查

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate {

        var webView: WKWebView!


        override func viewDidLoad() {
            super.viewDidLoad()


            setupWebView()

            let url = URL(string: "https://www.google.com")
            let request = URLRequest(url: url!)
            webView.load(request)
    }

    func setupWebView() {
            let webConfiguration = WKWebViewConfiguration()

            webView = WKWebView(frame:.zero , configuration: webConfiguration)
            webView.uiDelegate = self
            //view = webView
            view.addSubview(webView)
            webView.translatesAutoresizingMaskIntoConstraints = false

            view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[v0]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0":webView]))
            view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-20-[v0]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0":webView]))
    }

        override func didReceiveMemoryWarning() {
                super.didReceiveMemoryWarning()
                // Dispose of any resources that can be recreated.
        }
}

希望它有所帮助。

Answer 3

let screenWidth = UIScreen.main.bounds.width
let screenHeight = UIScreen.main.bounds.height

self.webView = WKWebView(frame:CGRect( x: 0, y:UIApplication.shared.statusBarFrame.size.height, width:screenWidth, height: screenHeight ), configuration: WKWebViewConfiguration() )

确保导入UIKit。兼容所有设备，没有状态栏问题

iOS WKWebView状态栏填充

3 个答案: