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 fancy as navigation controls are all within the application.

Currently my ViewController.swift file looks like this:

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

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

The issue is the padding for the status bar, I would like to adjust it so that the status bar wasn't 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 status bar color, but it isn't an immediate concern at this time.

score 14 · Answer 1 · answered Sep 14 '17 at 05:39

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.

This was useful. In the end I went with autolayout constraints **instead** of this solution, but it helped orient. — Dan Rosenstark, Jun 20 '19 at 21:23
Use `env(safe-area-inset-top);`: https://developer.mozilla.org/en-US/docs/Web/CSS/env — derpedy-doo, Jan 19 '23 at 20:58

3stud1ant3 · Accepted Answer · 2017-07-31T17:45:57.140

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.

This solution won't work on iPhone X. You'll have to set the vertical constraint to the top layout guide instead of hardcoding an offset of 20px from the top of the screen. — Dorian Roy, Oct 04 '17 at 14:00

score 0 · Answer 3 · edited Jul 05 '20 at 04:51

0

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

edited Jul 05 '20 at 04:51

Jason Aller

3,541
28
38
38

answered Jul 05 '20 at 04:28

AbhiGarag

1
1

This did not work for me, xCode 13.3 – Jason May 12 '22 at 14:00

iOS WKWebView Status Bar Padding

3 Answers3

Linked