IOS WKWebView Status Bar Layout

Question

I have endlessly searched for an answer for this that works. I am trying to create a very simple WKWebView application to wrap a web application. I do not need anything, since the navigation controls are inside the application.

Currently, my ViewController.swift file is as follows:

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

Quick version: Apple Swift version 3.1 (swiftlang-802.0.53 clang-802.0.42)

The problem is the addition to the status bar, I would like to configure it so that the status bar is not on top of the content, as it is here:

Any help would be greatly appreciated as I am very new to iOS development. I would also like to be able to change the color of the status bar, but this is currently not an immediate problem.

Answer 1

, , ,

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 2

HTML/CSS ( HTML), viewport-fit=cover meta viewport. , , - , " " (, ).

iPhone X, .

, Apple CSS- , CSS: .. padding-top: constant(safe-area-inset-top);

CSS iOS 11 iPhone X: https://ayogo.com/blog/ios11-viewport/

---

HTML/CSS, -:

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

, iPhone X , .