css – 抑制WKWebView缩放内容,以与UIWebView相同的放大倍率渲染

前端之家收集整理的这篇文章主要介绍了css – 抑制WKWebView缩放内容,以与UIWebView相同的放大倍率渲染前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
问题

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

上下文

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

所有这些工作只是伟大的,当使用UIWebView。

但是popovers通常是相当紧凑。

我经历了什么

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

WKWebView中的放大系数不是可以设置的。当然,用户可以放大,但是失败的目的。我不是在寻找放大视口;我正在寻找的整个内容适合和文字包装像它会与UIWebView。

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

UIWebView有什么问题?

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

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

这里是我原来的CSS,UIWebView渲染得很好,但是WKWebView在一个popover将呈现在真正微小的字体:

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="viewport" content="initial-scale=1.0" />

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

猜你在找的CSS相关文章