Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

iphone - iOS WKWebView Status Bar Padding

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:

enter image description 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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...