禁止 WKWebView 缩放内容以与 UIWebView 相同的放大倍数进行渲染

2022-01-19 00:00:00 css uiwebview ios8 wkwebview

使用 WKWebView 代替 UIWebView,我注意到 WKWebView 的内容与我的 相比大大缩小了UIWebView.我希望 WKWebView 停止这样做,并像 UIWebView 那样尊重我的 CSS 值.

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.

我在我的原生 iOS 应用程序中使用 Web 视图来查看 iPad 上弹出框内的内容,我在其中显示信息内容.能够将其提供给内容和设计人员并说只需放入一些 HTML 内容,引用链接的 CSS 文件",这真是太好了.

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".

所有这些在使用 UIWebView 时都非常有效.

All of this worked just great when using UIWebView.

但弹出框通常非常紧凑.

But popovers are often quite compact.

在我的狭窄弹出窗口中,内容被缩小,就好像我的内容被缩小到整个网页以适应.我可以看到 WKWebView 主要面向在 iOS 上构建备用浏览器或构建混合应用程序的人,WKWebView 本质上是接管屏幕.

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.

WKWebView 中的放大倍数不是可以设置的.当然,用户可以放大,但这违背了目的.我不是在寻找放大的视口;我正在寻找适合 UIWebView 的整个内容和自动换行.

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.

使用 WKWebView,在模拟器中,如果我将正文文本大小增加到 50 像素而不是 14 像素,我会看到我想要的大小.然而,这段代码在设备上甚至都没有帮助,所以增加我的 CSS 大小也不是一种选择!

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!

嗯,真的没什么.它在 iOS8 中还没有(还)被弃用,也许 b/c 它仍然有用,正如我所经历的那样.然而,我确实注意到 WKWebView 很快.我已经看到一些猜测,即 UIWebView 的写作即将到来.我想:为什么不现在在 iOS8 中采用更现代的 API?"

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?"

所以,我现在继续使用 UIWebView,但如果我可以让它尊重我的 CSS 大小,我想切换到 WKWebView.

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.

这是我的原始 CSS,UIWebView 可以很好地呈现,但弹出窗口中的 WKWebView 会以非常小的字体呈现:

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" />

进入我的标题块并为我解决了它.看起来 WKWebView 的行为更像 Mobile Safari 而不是 UIWebView,所以如果你想控制缩放或一般大小,你需要设置视口.

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.

相关文章