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();"];
}

結語

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