WKWebView图片文字自适应屏幕

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

原创

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

1 ·

CC 4.0 BY-SA版权

文章标签：

#ios #swift

本文介绍了在iOS开发中，如何使WKWebView内的HTML内容，包括文字和图片，自适应屏幕大小。通过在创建WKWebView时添加JS代码实现文字自适应，以及利用特定的HTML源码实现图片自适应。同时，文章提供了交流学习的iOS开发者群号。

前言

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

作为一个开发者，有一个学习的氛围跟一个交流圈子特别重要，这是一个我的iOS交流群：812157648，不管你是小白还是大牛欢迎入驻，分享BAT,阿里面试题、面试经验，讨论技术，大家一起交流学习成长！

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