wkwebview 中的自动缩放 HTML 内容（webview放大缩小）

25-02-20 16

本文的目的是介绍wkwebview中的自动缩放HTML内容的详细情况，特别关注webview放大缩小的相关信息。我们将通过专业的研究、有关数据的分析等多种方式，为您呈现一个全面的了解wkwebview

本文的目的是介绍wkwebview 中的自动缩放 HTML 内容的详细情况，特别关注webview放大缩小的相关信息。我们将通过专业的研究、有关数据的分析等多种方式，为您呈现一个全面的了解wkwebview 中的自动缩放 HTML 内容的机会，同时也不会遗漏关于BAWKWebView BAWKWebView 分类封装 WKWebView、css – 抑制WKWebView缩放内容,以与UIWebView相同的放大倍率渲染、ios - 为什么用 WKWebView 加载相同的 html 文本，有时展示的内容却不一样。、IOS Html富文本渲染方式：DTCoreText、WKWebView、UIWebView的内存占用对比_html/css_WEB-ITnose的知识。

本文目录一览：

wkwebview 中的自动缩放 HTML 内容（webview放大缩小）
BAWKWebView BAWKWebView 分类封装 WKWebView
css – 抑制WKWebView缩放内容,以与UIWebView相同的放大倍率渲染
ios - 为什么用 WKWebView 加载相同的 html 文本，有时展示的内容却不一样。
IOS Html富文本渲染方式：DTCoreText、WKWebView、UIWebView的内存占用对比_html/css_WEB-ITnose

wkwebview 中的自动缩放 HTML 内容（webview放大缩小）

在您的 webView 启动后添加以下代码：

let js = "var style = document.createElement('meta'); style.name = 'viewport'; style.content = 'width=device-width,initial-scale=1,maximum-scale=1'; document.head.appendChild(style);"
webView.evaluateJavaScript(js)

这段代码向页面添加一小段js并“执行”它。此 js 代码关闭自动缩放效果。对我来说效果很好。

BAWKWebView BAWKWebView 分类封装 WKWebView

BAWKWebView BAWKWebView 介绍

BAWKWebView

1、用分类封装 WKWebView，代码无任何侵入更改
2、用 block 方式实现所需代理回调，更加方便，代码更简洁
3、一行代码搞定 request、URL、URLString、本地 HTML文件、HTMLString等请求
4、一个 block 搞定 title、progress、currentURL、当前网页的高度等等所需
5、有博爱封装好的 BAWebViewController 可以直接使用，也可以参考自定义浏览器【参考demo】
6、WKWebView 自定义 request post 数据到 JS（使用分类）
7、WKWebView OC 拦截 JS URL 处理，详见demo
8、修复 WKWebView 中的 alert 不能弹出的 bug！（详见 demo5）
9、新增 cell 中 WKWebView 高度自适应 demo（demo 有小部分遗留问题待解决）
10、自定义修改 navigator.userAgent（详见 demo BAWebViewController）

BAWKWebView BAWKWebView 官网

https://github.com/BAHome/BAWKWebView

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，所以你需要设置视口，如果你想控制缩放或一般尺寸。

ios - 为什么用 WKWebView 加载相同的 html 文本，有时展示的内容却不一样。

如图：

红色框部分是 WKWebView，左边的是正常显示情况，右边的异常显示。
我是在网页加载完成回调里执行的 webview 高度自适应内容：

// 页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
    
    if ([webView isFinishLoading] == YES) { self.webView.height = self.webView.scrollView.contentSize.height;

左右两边获取到的高度都是一样的，但是右边却没完整展示出来，而且还放大了。

最让我懵逼的是有时加载是完整的有时又是不完整的。

更让我懵逼的是如果我写个延迟加载推迟一秒，这个时候的展示又都是正确的了：

// 页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
    
    if ([webView isFinishLoading] == YES) { __weak typeof(self) weakSelf = self; dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ // 1秒后异步执行这里的代码... weakSelf.webView.height = weakSelf.webView.scrollView.contentSize.height;

如果我用 UIWebView 而不是用 WKWebView，就不会遇到这种问题。

谁能告诉我页面有时没完整展示的原因。。。先多谢了

IOS Html富文本渲染方式：DTCoreText、WKWebView、UIWebView的内存占用对比_html/css_WEB-ITnose

在app的内容页（详情页）中，富文本的显示一直是经常需要处理的问题，而通常在后端的富文本编辑中，html应用比较普遍，所以其实需要处理的html富文本显示的问题，以下这三种方式肯定不是最优的显示html富文本的方式，只是相对简单的解决方案，对前后端的转换要求少，可以快速集成。

以下对这3种方式进行内存的测试对比，毕竟详情页是相对比较大，而且打开频率高的页面，所以内存占用是必须要考虑的问题。

基本环境：

Objective-C
Xcode 6.4
Deployment Target IOS 8.0
DTCoreText 版本：1.6.16

说明：

DTCoreText：第三方富文本显示组件，支持Html转换为 NSAttributedString；
WKWebView：IOS 的WebKit框架的浏览器组件，从IOS 8.0 开始支持；
UIWebView：IOS 的UIKit框架的浏览器组件，从IOS 2.0 开始支持；

测试方法：

使用3个组件分别显示一个web页面的内容（例如：http://news.dayoo.com/guangzhou/201512/11/139995_45489706.htm）；
页面加载完后，清空内容，再次加载内容，重复3次；
比较3个组件所占用的内存情况；

内存调试工具：Instruments

测试结果：

DTCoreText

WKWebView

UIWebView

运行期的内存占用： DTCoreText

立即学习“前端免费学习笔记（深入）”；

UIWebView一直被人诟病的内存占用问题依旧没有解决，如果需要打开的Html页面比较复杂（尤其是有不少js的）还是慎用吧，新的WKWebView 确实比UIWebView 在内存管理上做得更好，如果app可以抛弃IOS 7 或以下版本，值得使用，至少在内存占用上已经跟原生的NSAttributedString 差距没那么大了，在IOS设备内存和性能更高的情况下，差距会更小，而纯Html 页面灵活度会更高。

之前在使用UIWebView的时候，试过各种释放内存的方法，包括设置 NSURLCache，清空NSURLCache 等方法，但实际作用都不大，所以在测试中并没有使用这些方式，只是使用 [_webContent loadHTMLString:nil baseURL:nil]; 进行清空内容；

今天关于wkwebview 中的自动缩放 HTML 内容和webview放大缩小的分享就到这里，希望大家有所收获，若想了解更多关于BAWKWebView BAWKWebView 分类封装 WKWebView、css – 抑制WKWebView缩放内容,以与UIWebView相同的放大倍率渲染、ios - 为什么用 WKWebView 加载相同的 html 文本，有时展示的内容却不一样。、IOS Html富文本渲染方式：DTCoreText、WKWebView、UIWebView的内存占用对比_html/css_WEB-ITnose等相关知识，可以在本站进行查询。

本文标签：