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

╰半夏微凉° 2022-06-02 11:45 407阅读 0赞

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