Android webview圖片適應螢幕問題
阿新 • • 發佈:2019-01-10
當用 WebView來載入 html的字串時:webView.loadDataWithBaseURL(serviceUrl, html, "text/html","UTF-8", null); 有時候圖片會很大,寬度超過螢幕的寬度時,可以再html的文字之前加入css的樣式<style> img{ max-width:100%; height:auto;} </style> 這樣 圖片的最大寬度就會等於webview的寬度,高度自動適應,當然 如果 <img/>標籤裡設定style的屬性固定了寬高 就行不通了,除非把style 屬性去掉
- /**
-
* 使用正則表示式 把html標籤中的style屬性全部替換成""
- */
- private String replaceImgStyle(String html){
- String reg = "style=\"([^\"]+)\"";
- Pattern pattern = Pattern.compile(reg);
- Matcher matcher = pattern.matcher(html);
- return matcher.replaceAll("");
- }
- //設定img標籤的css樣式
-
String imgStyle = "<style> img{ max-width:100%; height:auto;} </style>"
- String html = newsData.getContent();
- <span style="white-space:pre"> </span>//這個工具類用來判斷字串是否為空
- if(StringUtil.isEmptyString(html)){
- html ="";
- }else{
- html = replaceImgStyle(html);
- }
-
html = imgStyle+html;//newsData.getContent().replaceAll("<img","<img width=" + "\'" + width + "\'");
- webView.loadDataWithBaseURL(CommonConfig.WS_URL, html, "text/html",
- "UTF-8", null);
還有一種問題就是直接載入網頁view.load(url)
如果使用了webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);這句程式碼在有些手機上會變形,慎用