Prevent WKWebView from scaling content for rendering at the same magnification as UIWebView

Question

Problem

Using WKWebView instead of UIWebView , I noticed that the contents of WKWebView were significantly reduced compared to my UIWebView . I would like WKWebView to stop doing this and just respect my CSS values ​​literally, the way UIWebView would be.

Context

I use web views in my native iOS application for content that goes into popovers on the iPad, where I display informational content. This is great if you can give it to the content and design people and say, "just run some HTML content, referencing the linked CSS file."

All of this worked fine when using UIWebView .

But popovers are often quite compact.

What i feel

In my narrow popovers, the content decreases as if my content, where the entire web page was miniaturized, to fit. I see that WKWebView was primarily intended for people who build alternative browsers on iOS or create hybrid applications where WKWebView essentially captures the screen.

The zoom factor in WKWebView cannot be set. Of course, the user can zoom in, but that defeats the goal. I am not looking for an enlarged viewport; I’m looking for all the content that fits and carries in words, like in UIWebView.

With WKWebView, in the simulator, I will see the size that I want if I increase the size of the body text to 50 pixels instead of 14px. This code, however, doesn't even help when on the device, so bloating my CSS sizes is also not an option!

What is wrong with UIWebView?

Well nothing. In iOS8, it is not deprecated, but maybe b / c it has usefulness as I experience. However, I noticed that WKWebView was fast. And I saw some suggestions that the wall post is for UIWebView. I thought: “Why not accept the more modern API in iOS8 now?”

So, I continue to use UIWebView for now, but I would like to switch to WKWebView if I could appreciate its CSS size.

Here is my original CSS, which UIWebView renders perfectly, 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. It looks like WKWebView behaves like Mobile Safari than UIWebView, so you need to set the viewport if you want to control the scaling or overall size.