1. 程式人生 > >Android webview圖片適應螢幕問題

Android webview圖片適應螢幕問題

當用 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 屬性去掉

  1. /** 
  2.  * 使用正則表示式 把html標籤中的style屬性全部替換成""
     
  3.  */
  4. private String replaceImgStyle(String html){  
  5.     String reg = "style=\"([^\"]+)\"";  
  6.     Pattern pattern = Pattern.compile(reg);  
  7.     Matcher matcher = pattern.matcher(html);  
  8.     return matcher.replaceAll("");  
  9. }  

  1. //設定img標籤的css樣式
  2.         String imgStyle = "<style> img{ max-width:100%; height:auto;} </style>"
    ;  
  3.         String html  = newsData.getContent();  
  1. <span style="white-space:pre">        </span>//這個工具類用來判斷字串是否為空
  2.         if(StringUtil.isEmptyString(html)){  
  3.             html ="";  
  4.         }else{  
  5.             html = replaceImgStyle(html);  
  6.         }  
  7.         html = imgStyle+html;//newsData.getContent().replaceAll("<img","<img width=" + "\'" + width + "\'");
  8.         webView.loadDataWithBaseURL(CommonConfig.WS_URL, html, "text/html",  
  9.                 "UTF-8"null);  


還有一種問題就是直接載入網頁view.load(url)

如果使用了webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);這句程式碼在有些手機上會變形,慎用