WKWebView - content not fitting after magnification

Question

I’m experiencing a problem with a WKWebView on setting the magnification property.

I expecting the content to resize to fit like it does in Safari. But I can’t achieve this. When setting the magnification to a value less than 1.0 is the following.

The extra space is not used and a margin occurs. In Safari zooming out results in smaller text and image size but the extra space is actually used.

I'm using InterfaceBuild with XIB files wire up the view.

Also, I enable magnification in viewDidLoad.

webView.allowsMagnification = YES;

I also tried the following with no success:

webView.translatesAutoresizingMaskIntoConstraints = NO;
webView.autoresizesSubviews = NO;
webView.autoresizingMask = NSViewWidthSizable | NSViewHeightSizable;

Any hint would be very much appreciated.

Answer 1

The problem is that WKWebView's magnification property doesn't do what you think it does. What it does is that it scales the rendered page as a whole (think taking a bitmap or image and resizing it).

What you want is the dynamic scaling capability that Safari (and other browsers) have, generally referred to as "zooming". This is different from magnification, as it scales the layout of the page. This scales up or down the font sizes, element sizes, and so on, of a page individually.

There's no native (public) API to zoom a page like Safari does, but you can do pretty much the same thing by taking advantage of the CSS zoom property. Here's an extension that does just that:

extension WKWebView {

    func zoom(to zoomAmount: CGFloat) {
        evaluateJavaScript("document.body.style.zoom = '\(zoomAmount)'", completionHandler: nil)
    }

}

It can be used like this:

webView.zoom(to: 0.9)