Android WebView加载网页，图片等元素宽度大小不兼容手机屏幕的宽度

无论是Android手机还是iOS手机，使用WebView加载一些没有专门为手机屏幕做适配的网页的时候，就会出现网页中的图片等标签元素的宽度大小和手机屏幕的宽度不一致的情况，如下图

之所以会出现上面的情况，是因为网页中的dom元素大小没有适配到移动网页中，有些元素是把宽度固定死的

解决办法有很多：

前端人员将网页适配到移动端（优点：最为规范的做法缺点：一些不再维护的项目，是没有前端人员来适配）
移动端开发人员自己通过JS的注入来修改（优点：在缺乏前端人员的支持下，可以勉强这样做缺点：元素变化的话，Native需要修改各种JS函数）

现在重点就说下第二种方法：

首先在Android和iOS这两个平台，WebView可以和Native进行交互的，在Native中编写JS函数注入到html中，也可以在网页调用Native的函数。

这里我就简单讲一下通过JS注入到html中，来改变相应元素的大小，以及字体等，Android和iOS都有WebView，都可以监听监听网页的加载的过程，在Android中通过WebViewClient来监听网页的加载过程，一般我们需要在网页所有资源加载完成后，也就是onPageFinish的方法中，注入JS，废话不多说，直接看代码：

package com.example.webviewdemo;

import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.WindowManager;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
    private static final String TAG = "WebView";

    private WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.webView);
        initWebSettings();

        webView.loadUrl("http://www.ah12377.cn/newsDetail/151");

        //监听WebView是否加载完成网页
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                Log.d(TAG,"onPageFinished");
                loadJS();
            }
        });


    }

    private void loadJS(){
        webView.loadUrl("javascript:(function(){"
                //将DIV元素中的外边距和内边距设置为零，防止网页左右有空隙
                + " var divs = document.getElementsByTagName(\"div\");"
                + " for(var j=0;j<divs.length;j++){"
                + "   divs[j].style.margin=\"0px\";"
                + "   divs[j].style.padding=\"0px\";"
                + "   divs[j].style.width=document.body.clientWidth-10;"
                + " }"

                + " var imgs = document.getElementsByTagName(\"img\"); "
                + "   for(var i=0;i<imgs.length;i++)  "
                + "       {"
                       //过滤掉GIF图片，防止过度放大后，GIF失真
                + "    var vkeyWords=/.gif$/;"
                + "        if(!vkeyWords.test(imgs[i].src)){"
                + "         var hRatio="+getScreenWidthPX()+"/objs[i].width;"
                + "         objs[i].height= objs[i].height*hRatio;"//通过缩放比例来设置图片的高度
                + "         objs[i].width="+getScreenWidthPX()+";"//设置图片的宽度
                + "        }"
                +    "}"
                +   "})()");
    }



    /**
     * WebView Setting
     */
    private void initWebSettings(){
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
//        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);

    }

    /**
     * 获取屏幕的宽度（单位：像素PX）
     * @return
     */
    private int getScreenWidthPX(){
        WindowManager wm = (WindowManager) this.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics dm = new DisplayMetrics();
        if (wm != null && wm.getDefaultDisplay() != null){
           wm.getDefaultDisplay().getMetrics(dm);
           return px2dip(dm.widthPixels);
        }else {
            return 0;
        }
    }

    /**
     * 像素转DP
     * @param pxValue
     * @return
     */
    public  int px2dip(float pxValue) {
        float scale = this.getResources().getDisplayMetrics().density;
        return (int) (pxValue / scale + 0.5f);
    }
}

代码非常简单，效果图如下，通过上面的代码可以知道，我们可以通过JS来修改html的任何元素，也可以去掉或者隐藏html中的元素等，当然也要懂点JS和html的开发，才能更好地下手，当然这个过程使用Chrome浏览器的调试面板也很重要

Android WebView加载网页，图片等元素宽度大小不兼容手机屏幕的宽度

猜你喜欢