Scaling content in WKWebView

Question

I recently started working on WKWebView and have minimum knowledge about it.

I want to know how to scale the content in the WKWebView so that it fits into the given view size without scrolling.

I have tried setting the height of the view to be screen size and load some large html content to the WKWebView and disable scrolling. Then only a part of the content is shown.

Then I searched for the approach to scale the content of the WKWebView so that the entire content is seen without need for scrolling.

Many people have posted questions regarding this but some questions were still unanswered and some other solutions did not work for me.

See [https://stackoverflow.com/questions/49382452/wkwebview-scalespagetofit-behaviour-without-java-script](https://stackoverflow.com/questions/49382452/wkwebview-scalespagetofit-behaviour-without-java-script) — RickJansen, Oct 15 '19 at 10:53

score 7 · Answer 1 · edited Jul 04 '19 at 11:48

7

For the WKWebView try the following three options depending upon your requirement:

webview being the webview in your file

webView.contentMode = .scaleAspectFill

or

 webView.contentMode = .scaleAspectFit

or

webView.contentMode = .scaleToFill

edited Jul 04 '19 at 11:48

Catarina Ferreira

1,824
5
17
26

answered Jul 04 '19 at 10:47

Mohit Rochwani

71
1
2

score 1 · Answer 2 · answered Nov 22 '18 at 14:37

1

Given a webView object of type WKWebView you can do

webView.contentMode = .scaleToFill

answered Nov 22 '18 at 14:37

Lorenzo Zanotto

163
6

score 1 · Answer 3 · answered Sep 28 '20 at 08:00

This 'contentMode' will work after set webview frame correctly (need to fit to the device). var webView: WKWebView!

func setupView() {
    let webConfiguration = WKWebViewConfiguration()

    webView = WKWebView(frame: CGRect(x: 0, y: 0, width: view.bounds.size.width, height: view.bounds.size.height), configuration: webConfiguration)
    webView.uiDelegate = self
    
    webView.contentMode = .scaleAspectFit
    webView.sizeToFit()
    webView.autoresizesSubviews = true
    
    self.view = webView
}

override func viewDidLoad() {
    super.viewDidLoad()
    setupView()
}

Scaling content in WKWebView

3 Answers3