UIWebView 適配屏幕

概述

這個問題困擾了我好多天，了尋找了很多解決方法但是不見效果。

首先我來說說故事背景吧，在一個項目的中，我被要求去把數據庫里的一段HTML代碼加載到app當中。我以為還是挺簡單的，但是問題來了。

如何在App中加載一大段 HTML呢？？？

首先 當然要用到 UIWebView，大家和我估計第一反應都是這樣。如何寫代碼呢 check一下也很多。大體如下：

    NSString *HTMLData = dataPostFormDataBase;
    [self.webView loadHTMLString:HTMLData baseURL:[NSURL fileURLWithPath: [[NSBundle mainBundle]  bundlePath]]];

so easy 媽媽再也不用擔心我的webView，但是問題又來了，HTML代碼里面 好像沒有定義寬高 約束布局。到了webView里面圖片就會變的 大的離譜。

那怎么調整大小呢

Google了一下(不會被抓吧)，查到這么一個屬性：

    self.webView.scalesPageToFit = YES;

然后 嘿，好想還真變小了，但是問題又來了，由于HTML 沒有定義約束，這是的圖片變的太小了，右邊有許多地方留白，那不是見鬼了啊。

于是乎又要踏上漫漫Google路。

用JS控制其寬度

經過查詢，原來可以在webView 中嵌入JS，屌炸了。然后我就知道怎么調整寬高了。

思想如下：找到HTML代碼中包裹img的父容器(我的是p標簽)，把它的寬度調整為屏幕的寬度。值得注意的是，一定要在 didFinishLoad的后 才能添加JS，不然JS加上去沒用。原因，自己check一下吧。

具體代碼如下：

-(void)webViewDidFinishLoad:(UIWebView *)webView
{
    //定義JS字符串
    NSString *script = [NSString stringWithFormat: @"var script = document.createElement('script');"
                        "script.type = 'text/javascript';"
                        "script.text = \"function ResizeImages() { "
                        "var myimg;"
                        "var maxwidth=%f;" //屏幕寬度
                        "for(i=0;i <document.images.length;i++){"
                        "myimg = document.images[i];"
                        "myimg.height = maxwidth / (myimg.width/myimg.height);"
                        "myimg.width = maxwidth;"
                        "}"
                        "}\";"
                        "document.getElementsByTagName('p')[0].appendChild(script);",ScreenW];
    
    //添加JS
    [webView stringByEvaluatingJavaScriptFromString:script];
    
    //添加調用JS執行的語句
    [webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
}

結語

上面純屬個人粗糙實現，如果有更好的辦法 可以和我分享我會更加感謝。