iOS開發——WebView載入HTML圖片大小自適應與文章自動換行
本文主要講述瞭如何在iOS應用中使用WebView載入HTML圖片時實現自適應與文章自動換行功能，現在把相關的實現思路和程式碼整理出來分享給iOS程式設計師兄弟們，希望給他們的開發工作帶來幫助。
在很多App中都會使用到webview，尤其是在載入新聞內容等文章形式的資料時。因為圖文混編以及不同字型格式的顯示，在iOS進行編輯和顯示都是一大問題（當然，iOS中也可以用CoreText進行繪製），但是對於web端來說，一個富文字編輯器就可以完美解決這個問題。所以後臺很多時候會直接返回HTML程式碼拿給前端解析，這時，在客戶端對HTML程式碼的處理就顯得尤為重要了。
在HTML程式碼中設定內容樣式，一般使用css或者js，那麼根據載入優先順序以及載入效果，可以自行選擇。
- js在頁面載入完之後載入，所以設定圖片樣式的時候，會先載入大圖，然後突然變小；
- css在引入時載入，直接載入縮小的圖片（實際佔用記憶體不會縮小）；
一、圖片自適應
1. 使用css進行圖片的自適應
在web前端，也就是HTML中，如果只設置圖片的寬度，那麼高度會根據圖片原本尺寸進行縮放。
如果後臺返回的HTML程式碼中，不包含<head>標籤，則可以直接在HTML字串前加上一下面的程式碼（如果包含<head>，則在<head>標籤內部新增）。程式碼含義是，不管使用者以前設定的圖片尺寸是多大，都縮放到寬度為320px大小。
<head><style
若需要根據圖片原本大小，寬度小於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/">
相關推薦
iOS開發——WebView載入HTML圖片大小自適應與文章自動換行
本文主要講述瞭如何在iOS應用中使用WebView載入HTML圖片時實現自適應與文章自動換行功能，現在把相關的實現思路和程式碼整理出來分享給iOS程式設計師兄弟們，希望給他們的開發工作帶來幫助。 在很多App中都會使用到webview，尤其是在載入新聞內容等文章形式的資
【iOS】UILabel自適應高度和自動換行
我們需要根據UILabel中字串的多少來確定label的大小(長度),下面是label自適應大小的方法 //初始化label UILabel *label = [[UILabel alloc] ini
android webview載入html圖片自適應手機螢幕大小&點選檢視大圖
我們在開發中，顯示資訊詳情時，一般後臺會給出html文字，在Android端一般採用webview控制元件來展示，但是後臺給出的html文字一般是給電腦端用的，沒有自適配手機，導致手機端圖片顯示過大，需要左右移動來檢視全圖。下面給出幾種實用方法，達到在手機端用webvi
iOS 網路圖片大小自適應
基於SDWebImage實現： __weak typeof(self)weakSelf = self; [self.imageView sd_setImageWithURL:[NSURL URLWithString:gM1.imageUrl] completed:^(UIImage * _N
WebView載入html圖片不顯示問題
參考連結 近期在專案中出現了一個問題，WebView載入html時，部分圖片顯示不出來，一直顯示裂圖，多方搜尋，可能是因為http和https的混合問題。 原因 在Android5.0 以及以上的系統，當WebView載入的連結為Https開頭，但是連結裡面的
圖片大小自適應垂直居中的方法（移動端）
ans translate color width 方法 form relative left ati img{ position: relative; max-height: 100%; max-width: 100%; width: a
Android RecycerView 中根據圖片大小自適應控制元件大小的實現
問題 recyclerView中 item有ImageView，ImageView大小根據圖片大小而改變大小 解決方案 GlideApp.with(mContext)
iOS開發（OC）——文字的自適應高度和行間距的設定
在開發過程中，會編寫一些詳情頁，有關詳情的介紹一般都比較長，但是由於是最後一個頁面了，所以需要全部顯示，這時就需要用到自適應高度，讓文字自動換行。 首先建立label，把frame設定為CGRectMake(0, 0, 0, 0) UILabel *la
自適應表格連續字元換行及單行溢位點點點顯示
這篇文章釋出於 2014年04月10日，星期四，00:59，歸類於 CSS相關。 閱讀 36010 次, 今日 14 次 7 條評論 by zhangxinxu from http://www.zhangxinxu.com 本文
android自定義控制元件自動換行效果實現
第一篇部落格裡面有介紹一篇關於自動換行實現諸多自定義控制元件跟各種效果的博文，但是礙於當初技術能力有限，寫的jar包裡的程式碼亂七八糟，在最近忙完了手頭的工作，不經意間翻看了之前的程式碼，真是慘不忍睹，隨決定重新封裝。重新編寫的android-custom-vg前
Android 自定義控制元件-自動換行的流線性佈局-DragFlowLayout
效果圖 步驟 1.繼承RelativeLayout 2.複寫onMeasure 3.複寫onLayout 4.提供介面回撥 5.使用ViewDragHelper實現對子控制元件拖拽 繼承RelativeLayout public
iOS開發技巧之：圖片壓縮成指定的大小
iOS中，我們為了節省記憶體，需要對圖片來進行處理，來優化程式，提高程式的效率，下面是一個根據自己的要求來重新設定圖片的大小： 一、壓縮圖片有兩種方式，第一種是壓縮圖片的大小，重新生成圖片的尺寸：如下 [html] view plai
android WebView載入html 處理的圖片過寬的工具類 (過寬的控制到100%,正常尺寸的不放大)
參考 部落格: 小曾同志的專欄: https://blog.csdn.net/u010023795/article/details/53509495 工具類 import org.jsoup.Jsoup; import org.jsoup.nodes.Document; impor
Android中WebView載入Html中的圖片新增點選事件
基本的思路： （1）WebView來載入HTML。 （2）向HTML中注入JavaScript，利用JavaScript來呼叫Android中的方法（執行一些跳轉的操作等等）。 首先你必須有一個HTML或者是一個地址，或者是存到本地的一個檔案。我這裡使用的是存到本
iOS WKWebView如何載入Html程式碼? WKWebView如何修改字型大小和顏色?
1.載入Html程式碼使用：NSString *htmlString = @“ <p> \U770b\U89c1\U5c31\U4e0a\Uff0c\U4e0d\U8981\U6002&l
混合開發之webView載入html,android 和 html之間進行資料互動
現在混合開發比較普遍了，其實早就該學學了，只限於自己對html不是很熟，搭的介面太醜了，哈哈… 今天寫Demo的需求是這樣的 1、在一個介面裡，半面html,半面android原生控制元件。 2、點選html傳送html的資料給android ，andro
Android WebView載入Html文字不能適配，以及圖片中間有空白的問題
1.WebView載入Html文字的正確方式 webView.loadData(html, "text/html; charset=utf-8", "utf-8"); 2.但是如果文字中帶圖片的
Android webview載入html自適應螢幕
webView.getSettings().setJavaScriptEnabled(true); webView.getSettings().setCacheMode(WebSettings.LOAD
android的WebView載入html內容圖片超出螢幕範圍
1.使用css處理 img{ width: 84vw;//佔寬度的84% } 2.在圖片內容後面條件Js 另外一種讓圖片不超出螢幕範圍的方法，現在用的是css <script type="text/javascript"> var table
iOS 讓webView裡的圖片自適應
NSString *js = [NSString stringWithFormat:@"function autoFit() { \ var imgs = document.getElementsByTagName('img')