android WebView 图片缩放功能小结

最近遇到一个要支持webview图片自适应屏幕的功能。上网搜索了一大堆资料，花了一天的时间，总算是把问题解决，现在总结一下步骤。

1. mWebView.setWebViewClient(new MyWebViewClient());  

2. // webview 4.4 
@SuppressLint("JavascriptInterface") 
    class MyWebViewClient extends WebViewClient { 
             
            @Override
            @SuppressLint("JavascriptInterface")
            public void onPageFinished(WebView view, String url) {
               super.onPageFinished(view, url); 
                    
                     
                    mWebView.setWebChromeClient(new WebChromeClient());  


                    mWebView.getSettings().setJavaScriptEnabled(true); // 设置支持javascript脚本 
                    if(android.os.Build.VERSION.SDK_INT >= 19) {
                    mWebView.loadUrl("javascript:(function(){"
                                    + "var objs = document.getElementsByTagName('img'); "
                                    + "for(var i=0;i<objs.length;i++) {"  
                                    + // //webview图片自适应，android4.4之前都有用，4.4之后google优化后，无法支持，需要自己手动缩放                              
                                    " objs[i].style.width = '100%';objs[i].style.height = 'auto';"
                                     + "}"
                                    + "})()"  
                                    );   
                    } else{
                    view.loadUrl("javascript:var imgs = document.getElementsByTagName('img');for(var i = 0; i<imgs.length; i++){imgs[i].style.width = '100%';imgs[i].style.height= 'auto';}");
                    }    
            } 
            
            @Override
            @SuppressLint("JavascriptInterface")
            public boolean shouldOverrideUrlLoading(WebView view, String url) {  
                view.loadUrl(url); 
                return true;
            } 

    }

二.其他做法分析

// Android 4.4图片显示不全
        if(android.os.Build.VERSION.SDK_INT >= 19) {// android系统版本号     
               mWebView.getSettings().setUseWideViewPort(true);
              mWebView.getSettings().setLoadWithOverviewMode(true);  
         
       } else{
          mWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); //就是这句      
      }  
        

1.上面有两种网友推荐的解决方法。 

mWebView.getSettings().setUseWideViewPort(true);
              mWebView.getSettings().setLoadWithOverviewMode(true);  

在4.4上面是可以实现图片缩小，不过连字体也缩小，不适合单独要求缩小图片。

2.mWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); 这个设置在4.4之后已经被废弃了，而且原理是整个缩小web页面达到适合一屏，也是不符合要求。

三.总结：

1. // webview 4.4 
@SuppressLint("JavascriptInterface")  4.4要求添加否则在部分机型上会出现异常。

2.onPageFinished执行，是为了保证url加载完成之后，重新加载一次。

3. if(android.os.Build.VERSION.SDK_INT >= 19) {
                     mWebView.loadUrl("javascript:(function(){"
                                    + "var objs = document.getElementsByTagName('img'); "
                                    + "for(var i=0;i<objs.length;i++) {"  
                                    + // //webview图片自适应，android4.4之前都有用，4.4之后google优化后，无法支持，需要自己手动缩放                              
                                    " objs[i].style.width = '100%';objs[i].style.height = 'auto';"
                                     + "}"
                                    + "})()"  
                                    );   
                    } else{
                      view.loadUrl("javascript:var imgs = document.getElementsByTagName('img');for(var i = 0; i<imgs.length; i++){imgs[i].style.width = '100%';imgs[i].style.height = 'auto';}");
                    }    

区分4.4系统，因为在4.4的系统上面，URL不太一样，需要进行区分。

4.部分4.4系统的手机不支持自定义js方法，所以才采用下面方式。

mWebView.loadUrl("javascript:(function(){"
                                    + "var objs = document.getElementsByTagName('img'); "
                                    + "for(var i=0;i<objs.length;i++) {"  
                                    + // //webview图片自适应，android4.4之前都有用，4.4之后google优化后，无法支持，需要自己手动缩放                              
                                    " objs[i].style.width = '100%';objs[i].style.height = 'auto';"
                                     + "}"
                                    + "})()"  
                                    );  

5.解决的方式是，通过利用js技术里面的imgs.width = '100%';来解决。