抑制WKWebView缩放内容，以与UIWebView相同的放大倍率渲染 [英] Suppress WKWebView from scaling content to render at same magnification as UIWebView does

问题描述

问题

使用 WKWebView 代替 UIWebView ，我注意到，与我的 UIWebView 相比， WKWebView 的内容大大缩小。我希望 WKWebView 停止这样做，只是尊重我的CSS值字面上， UIWebView 的方式。

上下文

我在本机iOS应用程序中使用Web视图来获取iPad上的popovers其中我显示信息内容。这是伟大的能够给内容和设计人员说，只是放入一些HTML内容，引用链接的CSS文件。

使用 UIWebView 时，所有这些工作都很好。

在我的狭窄的popovers中，内容被缩小，如同我的内容，其中整个网页被小型化以适合。我可以看到WKWebView主要是为那些在iOS上构建替代浏览器或构建混合应用程序，其中WKWebView本质上，接管了屏幕。

放大系数WKWebView不是可以设置的东西。当然，用户可以放大，但是失败的目的。我不是在寻找放大视口;我正在寻找的整个内容适合和word-wrap喜欢它与UIWebView。

使用WKWebView，在模拟器，我会看到我想要的尺寸如果我把我的身体文字大小增加到50px，而不是14px。这个代码，甚至在设备上甚至不能帮助，所以膨胀我的CSS大小是不是一个选择！

UIWebView有什么问题？

好吧，没有什么真的。它不是（还）在iOS8中弃用，也许b / c它仍然有用，因为我体验。但我没有注意到，WKWebView是快。我看到一些猜测，写作是在墙上的UIWebView。我想：为什么不在iOS8中采用更现代的API？

因此，我现在继续使用UIWebView，但是我想切换到

这是我的原始CSS UIWebView渲染得很好，但是WKWebView在一个popover将渲染真正的小字体：

/ p>

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

解决方案

我只需要把

 < meta name =viewportcontent =initial-scale = 1.0/> 
  

到我的标题块，并解决了它。看起来WKWebView的行为更像移动Safari比UIWebView，所以如果你想控制缩放或一般尺寸，你需要设置视口。

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

解决方案

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.

这篇关于抑制WKWebView缩放内容，以与UIWebView相同的放大倍率渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！