css - Suppress WKWebView from scaling content to render at same magnification as UIWebView does

Question

Problem

Using WKWebView in place of UIWebView, I noticed that the contents of the WKWebView were massively scaled down as compared to my UIWebView. I'd like the WKWebView to stop doing that, and just respect my CSS values literally, the way UIWebView would.

Context

I use web views in my native iOS app for the contents that go inside popovers on an iPad where I'm displaying informational content. It's great being able to give this to content and design folks and say, "just drop in some HTML content, referencing the linked CSS file".

All of this worked just great when using UIWebView.

But popovers are often quite compact.

What I'm Experiencing

In my narrow popovers, the content is scaled down as if my content where an entire web page being miniaturized to fit. I can see that WKWebView was primarily intended for folks building alternate browsers on iOS or building hybrid apps, where the WKWebView is essentially, taking over the screen.

The magnification factor in WKWebView is not something one can set. Sure, the user can zoom in, but that defeats the purpose. I'm not looking for a zoomed in viewport; I'm looking for the entire content to fit and word-wrap like it would with UIWebView.

With WKWebView, in the simulator, I'll see the sizing I want if I bump up my body text size to 50px instead of 14px. This code however, doesn't even help when on the device, so inflating my CSS sizes is not an option either!

What's Wrong with UIWebView?

Well, nothing really. It's not (yet) deprecated in iOS8, perhaps b/c it has usefulness still, as I'm experiencing. I did notice however, that WKWebView was fast. And I've seen some speculation that the writing is on the wall for UIWebView. I thought: "Why not adopt the more modern API in iOS8 now?"

So, I continue to use UIWebView for now, but I'd like to switch over to WKWebView if I could get it to respect my CSS sizing.

Here's my original CSS that UIWebView renders nicely, but which WKWebView in a popover will render in really tiny fonts:

body {
    font-family: "HelveticaNeue";
    font-size: 15px;
    line-height: 17px;
    color: #000000;
}

h1 {
    font-family: "HelveticaNeue-Bold";
    font-size: 18px;
    line-height: 20px;
    color: #000000;
}


h2 {
    font-family: "HelveticaNeue-Bold";
    font-size: 16px;
    line-height: 18px;
    color: #000000;
}

Answer 1

I had the same problem. I just had to put

<meta name="viewport" content="initial-scale=1.0" />

into my header block and that solved it for me. Looks like WKWebView behaves more like Mobile Safari than a UIWebView does, so you need to set the viewport if you want to control scaling or general sizing.