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;
}