WKWebView图片文字自适应屏幕

最新推荐文章于 2021-05-18 19:00:09 发布

转载最新推荐文章于 2021-05-18 19:00:09 发布 · 996 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a31e1b15188255a105041c4

文章标签：

#swift

本文介绍如何使用WKWebView实现HTML内容中的文字和图片自适应屏幕宽度的方法，通过添加JS代码和修改HTML源码来确保良好的视觉体验。

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

前言

在开发中经常需要使用到WebView，然而加载HTML字符串后效果并不是全屏，这时候就需要做自适应屏幕大小。这里主要说一下WKWebView如何实现图片和文字自适应屏幕。

1.文字自适应屏幕

创建WKWebView的时候，直接添加js来实现自适应。

// 自适应屏幕宽度js
NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
WKUserContentController *wkUController = [[WKUserContentController alloc] init];
[wkUController addUserScript:wkUScript];
WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
wkWebConfig.userContentController = wkUController;
WKWebView *contentWeb = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:wkWebConfig];
复制代码

2.图片自适应屏幕

图片自适应屏幕采用添加HTML源码的方式来实现自适应，使用下面源码拼接上后台的HTML源码，然后直接加载既可。

NSString *htmlString = [NSString stringWithFormat:@"<html> \n"
                            "<head> \n"
                            "<style type=\"text/css\"> \n"
                            "body {font-size:15px;}\n"
                            "</style> \n"
                            "</head> \n"
                            "<body>"
                            "<script type='text/javascript'>"
                            "window.onload = function(){\n"
                            "var $img = document.getElementsByTagName('img');\n"
                            "for(var p in  $img){\n"
                            " $img[p].style.width = '100%%';\n"
                            "$img[p].style.height ='auto'\n"
                            "}\n"
                            "}"
                            "</script>%@"
                            "</body>"
                            "</html>", html];
复制代码