在很多App中都會使用到webview，尤其是在加載新聞內容等文章形式的數據時。因為圖文混編以及不同字體格式的顯示，在iOS進行編輯 和顯示都是一大問題（當然，iOS中也可以用CoreText進行繪制），但是對於web端來說，一個富文本編輯器就可以完美解決這個問題。所以后台很多 時候會直接返回HTML代碼拿給前端解析，這時，在客戶端對HTML代碼的處理就顯得尤為重要了。
本文將講解在webview加載HTML代碼時，經常會遇到的圖片自適應大小與文章內容自動換行問題。
示例Demo下載地址：
https://github.com/saitjr/WebViewLoadHTMLImageAdaptiveDemo.git
環境信息：
Mac OS X 10.10.1
Xcode 6.1.1
iOS 8.1
正文：
首先看下原圖
原圖大小
在HTML代碼中設置內容樣式，一般使用css或者js，那么根據加載優先級以及加載效果，可以自行選擇。
- js在頁面加載完之后加載，所以設置圖片樣式的時候，會先加載大圖，然后突然變小；
- css在引入時加載，直接加載縮小的圖片（實際占用內存不會縮小）；
一、圖片自適應
1. 使用css進行圖片的自適應
在web前端，也就是HTML中，如果只設置圖片的寬度，那么高度會根據圖片原本尺寸進行縮放。
如果后台返回的HTML代碼中，不包含<head>標簽，則可以直接在HTML字符串前加上一下面的代碼（如果包 含<head>，則在<head>標簽內部添加）。代碼含義是，不管用戶以前設置的圖片尺寸是多大，都縮放到寬度為320px大 小。
<head><style>img{width:320px !important;}</style></head> 效果圖：
每張圖都同樣的寬度
若需要根據圖片原本大小，寬度小於320px的不縮放，大於320px的縮小到320px，那么在HTML字符串前加上一下代碼：
<head><style>img{max-width:320px !important;}</style></head> 效果圖：
超出設定范圍進行縮放
2. 使用js進行圖片的自適應
在webview的代理中，執行js代碼。(下面這段代碼是必須有<head>標簽的)
如果沒有<head>標簽，也很簡單，只需要給返回的HTML字符串前面拼接一個<head></head>即可。
- (void)webViewDidFinishLoad:(UIWebView *)webView { [webView stringByEvaluatingJavaScriptFromString: @"var script = document.createElement('script');" "script.type = 'text/javascript';" "script.text = \"function ResizeImages() { " "var myimg,oldwidth,oldheight;" "var maxwidth=320;"// 圖片寬度 "for(i=0;i maxwidth){" "myimg.width = maxwidth;" "}" "}" "}\";" "document.getElementsByTagName('head')[0].appendChild(script);"]; [webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"]; } 二、文章內容自動換行
文章的自動換行也是通過css實現的，書寫方式圖片縮放類似。在沒有<body>標簽的情況下，在HTML代碼前，直接拼接以下代碼即可（若包含<body>，則將代碼添加到body標簽內部），意思是全部內容自動換行。
<body width=320px style=\"word-wrap:break-word; font-family:Arial\"> 到這里，最基本的圖片自適應與文章自動換行就結束了，這其中還會引申出很多實用的技術，例如iOS8中的WKWebView、JSBinding、CommonJS、iOS端使用HTML模板引擎等，我也會在接下來的文章中，一一介紹。