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

Answer 1

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.