CODEWITHSUNDEEP
ioswkwebviewiphone-x
j0h4nn3s
j0h4nn3s

Reputation: 2076

make WKWebview "real" fullscreen on iPhone X (remove safe area from WKWebView

I'm trying to implement a "real" fullscreen in App WebView, meaning I want the webcontent to fully go under the notch no matter what.

This is the current situation I am facing, when framing the WebView to the superviews bounds: wkwebview on iPhone X The red border is the border of the webView (Also the size of the screen). Twitter has 100% height and width on the body.

I understand that websites can't have 100% width in Safari and that its the default behaviour for the in App Browser to respect the safearea but especially in my case, where the webpages are somewhat designed for the app, I need to use the full space.

I couldn't figure out how to set the webview to give its content the full size. Is there a way to change the safearea?

Code Snippet:

private var webView : WKWebView!

override func viewDidLoad() {
    super.viewDidLoad()

    self.webView = WKWebView(frame: .zero)

    self.webView.layer.borderColor = UIColor.red.cgColor
    self.webView.layer.borderWidth = 2

    self.webView.load(URLRequest(url: URL(string: "https://www.twitter.com")!))

    self.view.addSubview(self.webView)
}

override func viewDidLayoutSubviews() {
    self.webView.frame = self.view.bounds
}

Upvotes: 33

Views: 37369

Answers (6)

sunnyday
sunnyday

Reputation: 2879

Here is one more solution without overriding and executing javascript:

webView.scrollView.contentInsetAdjustmentBehavior = .never

In my case, it worked great.

Objective-c version:

[webView.scrollView setContentInsetAdjustmentBehavior: UIScrollViewContentInsetAdjustmentNever];

Upvotes: 42

zhuomingzhe
zhuomingzhe

Reputation: 132

just add a meta element in your webpage head "viewport-fit=cover"

like this: 

meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,viewport-fit=cover"

Upvotes: 5

Clement Joseph
Clement Joseph

Reputation: 1293

For Objective C try this code - 

-(void) willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
   if (@available(iOS 11.0, *)) {
       if(toInterfaceOrientation == UIInterfaceOrientationPortrait){
          _webView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentAlways;
       }else{
          _webView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentScrollableAxes;
       }
   }
}

Upvotes: 4

quemeful
quemeful

Reputation: 9868

You can also extend safeAreaInsets from WKWebView. 

extension WKWebView {
    override open var safeAreaInsets: UIEdgeInsets {
        return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    }
}

Upvotes: 16

anders
anders

Reputation: 467

Use AutoLayout constraints instead:

NSLayoutConstraint.activate([
    webView.topAnchor.constraint(equalTo: view.topAnchor),
    webView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
    webView.leftAnchor.constraint(equalTo: view.leftAnchor),
    webView.rightAnchor.constraint(equalTo: view.rightAnchor)
])

Remember to add viewport-fit=cover to your webpage's viewport meta tag, and use Safari's new variables to add padding to your content, to make sure that it respects the safe areas.

/* iOS 11 */
constant(safe-area-inset-*);
/* iOS 11.2 */
env(safe-area-inset-*);

Edit

I was also exploring options for adding the meta tag without doing any changes on the actual webpage. If I remember correctly I did succeed in adding the meta tag through Swift with the following piece of code:

webView.evaluateJavascript("document.querySelector('meta[name=viewport]').content = document.querySelector('meta[name=viewport]').content + ', viewport-fit=cover'", completionHandler: nil)

This is for use in a WKWebView by the way, and you'll need to execute it after the webpage has loaded obviously. Also some error handling should probably be done, as this will throw an exception if a metatag named viewport is missing, and the content will be , viewport-fit=cover if the content is empty to begin with.

Upvotes: 10

j0h4nn3s
j0h4nn3s

Reputation: 2076

After a little try and error, this is the solution I came up with. Subclass WKWebView and create a custom class. Overwrite safeAreaInsets:

import Foundation
import WebKit

class FullScreenWKWebView: WKWebView {
    override var safeAreaInsets: UIEdgeInsets {
        return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    }
}

Upvotes: 58

Related Questions