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

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

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


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

解决办法有很多:

  1. 前端人员将网页适配到移动端(优点:最为规范的做法    缺点:一些不再维护的项目,是没有前端人员来适配)
  2. 移动端开发人员自己通过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浏览器的调试面板也很重要

目录
相关文章
|
12天前
|
监控 安全 Android开发
【新手必读】Airtest测试Android手机常见的设置问题
【新手必读】Airtest测试Android手机常见的设置问题
100 0
|
12天前
|
Android开发
【安卓版】网页转应用v1.2,生成属于你的专属应用
【安卓版】网页转应用v1.2,生成属于你的专属应用
58 2
|
12天前
|
Java Android开发
android 下载图片的问题
android 下载图片的问题
16 3
|
12天前
|
Android开发
Android通过手势(多点)缩放和拖拽图片
Android通过手势(多点)缩放和拖拽图片
15 4
|
12天前
|
Android开发
Android中Glide加载Https图片失败的解决方案
Android中Glide加载Https图片失败的解决方案
20 1
|
12天前
|
XML JSON Java
Android App开发即时通信中通过SocketIO在客户端与服务端间传输文本和图片的讲解及实战(超详细 附源码)
Android App开发即时通信中通过SocketIO在客户端与服务端间传输文本和图片的讲解及实战(超详细 附源码)
115 0
|
12天前
|
Android开发
Android保存图片到相册(适配android 10以下及以上)
Android保存图片到相册(适配android 10以下及以上)
30 1
|
12天前
|
JavaScript 前端开发 UED
JS自动跳转手机移动网页
JS自动跳转手机移动网页
461 0
|
12天前
|
安全 网络协议 Linux
【公网远程手机Android服务器】安卓Termux搭建Web服务器
【公网远程手机Android服务器】安卓Termux搭建Web服务器
80 0
|
12天前
|
API Android开发
[Android]图片加载库Glide
[Android]图片加载库Glide
61 0