CODEWITHSUNDEEP
iosswiftresponsivewkwebview
barnonline
barnonline

Reputation: 327

IOS wkwebview responsive design not fill full screen

Info:

Xcode 9, SWIFT 4, Ipad pro 12,9 2 gen (but it is the same for all the iPad simulator I have tried)

I'm having a webview, that shows a responsive design webpage.

And when I run it on an iPhone simulator, it looks nice. And fills the entire screen. But when I run it on the Ipad simulator, the responsive design does not think it is a large screen. It is the usual setup, if it is a small screen the menu is three horizontal lines, and if it is a large screen, is a navigationbar.

So even if the webview fills the entire screen on the iPad, the page only takes up a quarter of the screen and have the three line menu. If I open the same URL in Safari on the Ipad simulator, I get the correct layout with a navigation bar.

On the webpage, in the header, I have this, and that, in general, gives the correct result on various devices and browsers/webviews, but not on iPad (simulator)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

I have found some posts that mention I could do some javascript in order to make it scale, but it does not have any effect. When I try to get the webView.bounds.size.width, it gives me a value of 375, and that is obviously far too small, I then try to manually set it to 2000, but no effect.

Does anyone have any clue?

import UIKit
import WebKit
class ViewController: UIViewController {
    @IBOutlet weak var webView: WKWebView!
    override func viewDidLoad() {
        super.viewDidLoad()

        let url = URL(string: "https://mit.gsv.dk")!
        webView.load(URLRequest(url: url))

        var scrw = webView.bounds.size.width

       scrw = 2000
       /*
       let javascript = "document.querySelector('meta[name=viewport]').setAttribute('content', 'width=\(scrw);', false); "
      webView.evaluateJavaScript(javascript)
      */

        var scriptContent = "var meta = document.createElement('meta');"
        scriptContent += "meta.name='viewport';"
        scriptContent += "meta.content='width=device-width';"
        scriptContent += "document.getElementsByTagName('head')[0].appendChild(meta);"

        webView.evaluateJavaScript(scriptContent, completionHandler: nil)

    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()

    }
}

Upvotes: 1

Views: 4737

Answers (1)

Razib Mollick
Razib Mollick

Reputation: 5052

Your code is perfect from UIviewcontroller. You need to set constraints to align left, right, top and bottom to 0 in your storyboard.

Upvotes: 3

Related Questions