iOS WebView加載圖片自適應屏幕的解決方案


這幾天一直困擾我的一個問題,

WebView加載XML的時候,圖片跟文字一直無法做到同時自適應,網上也找了很多方法,效果出來跟安卓的就是有差距;

另外,如果設置了下面這行代碼:

_webView.scalesPageToFit = YES;

布局的樣式,會優先選擇尺寸最大的那一張圖片適應屏幕,其他的圖片保持原圖顯示,這樣出來的效果如下圖

 

所以,這樣看起來會很不協調。其實,要做到圖片自適應屏幕,也沒有想像當中那么難,把 

_webView.scalesPageToFit = YES;這行代碼注釋掉,執行下面的代碼就OK了

- (void)webViewDidFinishLoad:(UIWebView *)webView

{

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

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

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

    var img = imgs[i];   \

    img.style.maxWidth = %f;   \

    } \

    }";

    js = [NSString stringWithFormat:js, [UIScreen mainScreen].bounds.size.width - 20];

    

    [webView stringByEvaluatingJavaScriptFromString:js];

    [webView stringByEvaluatingJavaScriptFromString:@"imgAutoFit()"];

}

運了出來的效果是下面這樣的,完成解決

 

 

 

喜歡的,點個贊!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM