13、Android Webview图片自适应屏幕解决方案

最新推荐文章于 2023-03-21 15:38:30 发布

FDoubleman

最新推荐文章于 2023-03-21 15:38:30 发布

阅读量2.8k

点赞数 1

android 疑难bug处理专栏收录该内容

21 篇文章 0 订阅

订阅专栏

图片过大，通过设置webview后字体又超小。

网上的方法千篇一律

尝试过程：

1、设置

//    mWebview.getSettings().setUseWideViewPort(true);//让webview读取网页设置的viewport，pc版网页
//    mWebview.getSettings().setLoadWithOverviewMode(true);

字体变得超级小，不是想要的效果

2、效果同上

// 没卵用  ---
mWebview.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);

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=no\"> " +
                "<style>img{max-width:100% !important; width:auto; height:auto;}</style>" +
                "</head>";
        return "<html>" + head + "<body style:'height:auto;max-width: 100%; width:auto;'>" + bodyHTML + "</body></html>";
    }

使用这种方法就让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);  
    }