wkwebview html5页面,WKWebView：适配H5页面的显示尺寸

最新推荐文章于 2021-12-25 17:06:30 发布

颜不糙

最新推荐文章于 2021-12-25 17:06:30 发布

阅读量715

点赞数

文章标签： wkwebview html5页面

本文介绍了WKWebView与UIWebView在显示HTML内容时存在的差异，并提供了两种适配方法。一种是在H5代码中添加适配WKWebView的meta标签，另一种是通过WKWebView的JavaScript代码注入，动态添加适配的viewport元标签，确保在iOS设备上展示效果一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般的同样的html代码，在UIWebView和WKWebView中显示效果是不一样的。例如

test_input

显示效果：

可以看出两者有明显的区别。

那么如何适配呢？有两个方法(本质上是一个)。

1、如果是H5适配WKWebView的话，需要在H5添加如下代码

完整的html如下

test_input

2、如果是WKWebView适配H5的话，那么就需要替前端添加相同的H5代码，实现如下

//js代码，在文档加载完毕后，添加head的子节点

//节点内容为

let jScript = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";

let wkUScript = WKUserScript.init(source: jScript, injectionTime: WKUserScriptInjectionTime.atDocumentEnd, forMainFrameOnly: true);

let wkUController = WKUserContentController.init();

wkUController.addUserScript(wkUScript);

let wkconfig = WKWebViewConfiguration.init();

wkconfig.userContentController = wkUController;

_webView = WKWebView.init(frame: CGRect.init(x: 0, y: 0, width: self.view.bounds.size.width, height: self.view.bounds.size.height), configuration: wkconfig);

self.view.addSubview(_webView);

let htmlfile = Bundle.main.path(forResource: "test", ofType: ".html");

let url = URL.init(fileURLWithPath: htmlfile!);

let request = URLRequest.init(url: url);

_webView.load(request);