iOS WKWebView Status Bar Padding

Question

I have been endlessly searching for an answer for this that works. I am trying to create a very simple WKWebView application to wrap out web app. I don\'t need anything fanc

Answer 1

I solved this problem using autolayout constraints, Please check

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.
        }
}

Hope it helps.

Answer 2

To do this entirely in HTML/CSS (which would involve you having control over the HTML), you'd want to add viewport-fit=cover to the meta viewport tag. This tells the device that you want the webview to fill the entire screen, including "safe areas" (such as behind the status bar).

But you'll also want to adjust your padding dynamically to handle the iPhone X, which has a larger status bar area and includes a notch for the speaker and camera.

Luckily, Apple exposed some CSS constants for the safe area insets, so you can take advantage of those in your CSS: i.e., padding-top: constant(safe-area-inset-top);

I wrote a bit more about this scenario and the new CSS features for iOS 11 and iPhone X: https://ayogo.com/blog/ios11-viewport/

---

If you don't have control over the HTML/CSS being loaded, then you can disable the safe area behaviour for your web view:

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

Note that on iPhone X this might cause content to be inaccessible and obscured by the notch.

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() )

make sure to import UIKit. compatible to all the devices no status bar issues