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

Posted YanceChen2013

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iOS 让HTML网页内容和图片自适应UIWebView的宽度相关的知识,希望对你有一定的参考价值。

加载网页的时候,有时候我们设置了[_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'"];

以上是关于iOS 让HTML网页内容和图片自适应UIWebView的宽度的主要内容,如果未能解决你的问题,请参考以下文章

如何让网页自适应所有屏幕宽度

dreamweaver 背景图片怎么自适应浏览器大小

HTML5画布自适应屏幕之后,如何获取屏幕中画布图片的坐标区域!急

网页设计中如何让图片轮播

如何让网页在浏览器自适应屏幕大小?

如何让网页自适应屏幕大小