13、Android Webview圖片自適應螢幕解決方案
阿新 • • 發佈：2019-02-12
圖片過大，通過設定webview後字型又超小。
網上的方法千篇一律
嘗試過程：
1、設定
// mWebview.getSettings().setUseWideViewPort(true);//讓webview讀取網頁設定的viewport，pc版網頁
// mWebview.getSettings().setLoadWithOverviewMode(true);字型變得超級小，不是想要的效果
2、效果同上
// 沒卵用 ---
mWebview.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm 3、CSS控制，嘗試加入程式碼
/**
* 拼接html字串片段
* @param bodyHTML
* @return
*/
private String getHtmlData(String bodyHTML) {
String head = "<head>" +
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable 使用這種方法 就讓webview載入圖片自適應螢幕了。
注意：需要對webview 設定：
webView.getSettings().setJavaScriptEnabled(true);
下面的方法沒使用過不知道是否可以！（備用吧）
4、自己計算圖片的高度，然後出現了以下程式碼
動態縮放圖片的高度到webview的寬度（）
主要是解析出height、width屬性，然後重新賦值。
/**
* 修改Img標籤將Html文字的圖片自適應螢幕
* @param mHtml 原始碼
* @param mContex
* @param WebviewWidth webview控制元件的寬度。
* @return
*/
public static String resizeImageHtml(String mHtml,Context mContex,int WebviewWidth){
//解析出<img>標籤
String[] mImgs=mHtml.split("<img");
StringBuilder mRstHtml=new StringBuilder();
if(mImgs.length>0){
for (int i = 0; i < mImgs.length; i++) {
String mImg=mImgs[i];
//過濾掉
int start=mImg.indexOf("style=");
int end=mImg.indexOf("/>");
if(start!=-1&&end!=-1){//認定為Img標籤
String mStyle=mImg.substring(mImg.indexOf("style="),mImg.indexOf("/>"));
String[] mMap=mStyle.split(";");
LogCat.w(Arrays.toString(mMap));
//獲取圖片原始寬高
String mHeight="";
String mWidth="";
for (String mKey : mMap) {
if(mKey.contains("height")){
mHeight=mKey.substring(mKey.indexOf("height:")+"height:".length()).replaceAll("[^0-9]","");
}else if(mKey.contains("width")){
mWidth=mKey.substring(mKey.indexOf("width:")+"width:".length()).replaceAll("[^0-9]","");;
}
}
float mImgW=Float.parseFloat(mWidth);
float mImgH=Float.parseFloat(mHeight);;
float mWebW=Utils.px2dip(mContex,WebviewWidth);
if(mImgW>mWebW){//需要縮放
float mScale=mImgW/mWebW;//獲得縮放倍率
mImgW=mWebW;
mImgH=mImgH/mScale;
mImg=mImg.replace(mHeight,mImgH+"").replace(mWidth,mImgW+"");
}
LogCat.w("Result=height:"+mImgH+"width:"+mImgW);
}
if(i==mImgs.length-1){
mRstHtml.append(mImg);
}else{
mRstHtml.append(mImg).append("<img");
}
}
}else{
mRstHtml.append(mHtml);
}
return mRstHtml.toString();
} 輔助方法：
public static int dip2px(Context context,float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
public static int px2dip(Context context, float pxValue){
final float scale = context.getResources().getDisplayMetrics().density;
return (int)(pxValue / scale + 0.5f);
}參考來源：