WKWebView自适应屏幕的一些经验

来源：互联网发布：java栈排列字符串编辑：程序博客网时间：2024/05/16 15:45

小弟在用webview的时候，显示的文本不会自动换行和字体显示过小，加载的图片没有按屏幕大小适配。

先来说说文本的自动换行：

html文本是直接从服务器获取的，就只有html文本，不带css格式不带js。

然后网上查找一番之后加入下面代码，并在原来的html文本基础上添加了css格式

在body后面添加 width=device-width style=\"word-warp:break-word;font-family:Arial\"实现自动换行

//WKWebView

WKWebViewConfiguration *configuration = [[WKWebViewConfigurationalloc] init];

WKUserContentController *userContentController = [[WKUserContentControlleralloc] init];

// 自适应屏幕宽度js

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

WKUserScript *wkUserScript = [[WKUserScriptalloc] initWithSource:jSStringinjectionTime:WKUserScriptInjectionTimeAtDocumentEndforMainFrameOnly:YES];

// 添加自适应屏幕宽度js调用的方法

[userContentController addUserScript:wkUserScript];

configuration.userContentController = userContentController;

WKPreferences *preferences = [WKPreferencesnew];

preferences.javaScriptCanOpenWindowsAutomatically =YES;

//设定最小字体

preferences.minimumFontSize = 50.0;

configuration.preferences = preferences;

WKWebView *webview = [[WKWebViewalloc] initWithFrame:mScreenBoundsconfiguration:configuration];

再来就说说图片的适配：

图片的时候需要在webview加载完之后执行代码，就是在webview的代理方法里添加：

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation

{

weakSelf(weakSelf);

NSString *js =@"function imgAutoFit() { \

var maxwidth = %f;\

var imgs = document.getElementsByTagName('img'); \

for (var i = 0; i < imgs.length; ++i) {\

var img = imgs[i]; \

if(img.width > maxwidth){ \

img.width = maxwidth; \

} \

}";

js = [NSString stringWithFormat:js, self.meetingContentWebView.bounds.size.width];

[webView evaluateJavaScript:jscompletionHandler:nil];

[webView evaluateJavaScript:@"imgAutoFit();"completionHandler:nil];

[webView evaluateJavaScript:@"document.body.offsetHeight;"completionHandler:^(id_Nullable any, NSError *_Nullable error) {

NSString *heightStr = [NSStringstringWithFormat:@"%@",any];

weakSelf.meetingContentWebViewHeightConstraint.constant = heightStr.floatValue + 100.0f;

}];

}

另外说一下小弟在遇到的坑：

1、uiwebview不需要像wkwebview那样繁琐的设置就可以实现屏幕适配和自动换行，还有就是可以成功加载css格式。直接把css写在htmlString里用loadHtmlString方法，或者通过外部css样式表格式化都可以

直接在htmlString里面写：

（但是外部加载需要注意的是，css文件不能放在项目的nsbundle mainbundle下面，需要把css文件复制到tmp里）

可以参考一下这个帖子： http://www.jianshu.com/p/ccb421c85b2e

2、wkwebview无法加载css格式，无论是通过外部css样式表格式化的还是直接写在htmlString里的css格式都没法显示出来，这个我也找不到原因，需要继续研究。

阅读全文

1 0