WebView加載HTML圖片大小自適應與文章自動換行

時間 2019-11-07

標籤 webview 加載 html 圖片大小自適應文章自動換行欄目 HTML 简体版

原文原文鏈接

在HTML代碼中設置內容樣式，通常使用css或者js，那麼根據加載優先級以及加載效果，能夠自行選擇。javascript

js在頁面加載完以後加載，因此設置圖片樣式的時候，會先加載大圖，而後忽然變小；css
css在引入時加載，直接加載縮小的圖片（實際佔用內存不會縮小）；前端

1、圖片自適應

1. 使用css進行圖片的自適應

在web前端，也就是HTML中，若是隻設置圖片的寬度，那麼高度會根據圖片本來尺寸進行縮放。java

若是後臺返回的HTML代碼中，不包含<head>標籤，則能夠直接在HTML字符串前加上一下面的代碼（若是包含<head>，則在<head>標籤內部添加）。代碼含義是，無論用戶之前設置的圖片尺寸是多大，都縮放到寬度爲320px大小。web

<head><style>img{width:320px !important;}</style></head>app

若須要根據圖片本來大小，寬度小於320px的不縮放，大於320px的縮小到320px，那麼在HTML字符串前加上一下代碼：lua

<head><style>img{max-width:320px !important;}</style></head>

2. 使用js進行圖片的自適應

在webview的代理中，執行js代碼。(下面這段代碼是必須有<head>標籤的)spa

若是沒有<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();"];
}

2、文章內容自動換行

文章的自動換行也是經過css實現的，書寫方式圖片縮放相似。在沒有<body>標籤的狀況下，在HTML代碼前，直接拼接如下代碼便可（若包含<body>，則將代碼添加到body標籤內部），意思是所有內容自動換行。code

<body width=320px style=\"word-wrap:break-word; font-family:Arial\">

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。