您的位置：首页 > 移动开发

iOS 让HTML网页内容和图片自适应UIWebView的宽度

2018-01-12 10:31 204 查看
加载网页的时候，有时候我们设置了[_detailsWebView setScalesPageToFit:YES] 这个方法，但是会根据网页界面的实际大小进行处理，致使展示的文字特别小，所以要做适应大小的处理；

方法一：

/**
* _infoModel.content就是后台返回的带有html标签的字符串
* " $img[p].style.width = '100%%';\n"--->就是设置图片的宽度的
* 100%代表正好为屏幕的宽度
*/
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>", _infoModel.content];

[_webView loadHTMLString:htmlString baseURL:nil];


为了解决字体显示过小的问题，还要把[_detailsWebView setScalesPageToFit:YES] 属性注释掉，另外也要设置一下加载界面的比例，具体比例根据界面大小进行设定，代码如下：

[_detailsWebView stringByEvaluatingJavaScriptFromString:@"document.body.style.zoom=1.3"];


方法二：

在代理方法中实现，进行比例的调整，代码如下：

- (void)webViewDidFinishLoad:(UIWebView *)webView{

NSString *jsMeta = [NSString stringWithFormat:@"var meta = document.createElement('meta');meta.content='width=device-width,initial-scale=1.3,minimum-scale=1.0,maximum-scale=2';meta.name='viewport';document.getElementsByTagName('head')[0].appendChild(meta);"];

[_detailsWebView stringByEvaluatingJavaScriptFromString:jsMeta];

}


// 补充：在代理方法里修改UIWebView字体颜色

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
[webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.webkitTextFillColor= 'white'"];
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  uiwebview ios html
相关文章推荐
新的分享
章节导航