標籤：
在很多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，那麼根據載入優先順序以及載入效果，可以自行選擇。
在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模板引擎等，我也會在接下來的文章中，一一介紹。
【iOS】WebView載入HTML圖片大小自適應與文章自動換行
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
