Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 } 
like image 458
j0h4nn3s Avatar asked Nov 11 '17 23:11

j0h4nn3s


People also ask

Is WKWebView the same as Safari?

WKWebView - This view allows developers to embed web content in your app. You can think of WKWebView as a stripped-down version of Safari. It is responsible to load a URL request and display the web content. WKWebView has the benefit of the Nitro JavaScript engine and offers more features.

How can I clear the contents of a UIWebView WKWebView?

To clear old contents of webview With UIWebView you would use UIWebViewDelegate 's - webViewDidFinishLoad: .

What is Mobile Safari UI WKWebView?

A WKWebView object is a platform-native view that you use to incorporate web content seamlessly into your app's UI. A web view supports a full web-browsing experience, and presents HTML, CSS, and JavaScript content alongside your app's native views.


1 Answers

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)     } } 
like image 68
j0h4nn3s Avatar answered Sep 16 '22 15:09

j0h4nn3s