android:加载html，太宽，适配解决方案。

android:加载html，太宽，适配解决方案。首先改的话必须的改html，所以我们直接在代码里插入html，设置他自动适配手机屏幕的宽度。String css = "<style type=\"text/css\"> " +"img {" +"width:100%;" +//图片宽度填充屏幕"height:auto;" +//图片高度自动"}" +

pumpkin的玄学

906人浏览 · 2020-08-25 22:03:53

pumpkin的玄学 · 2020-08-25 22:03:53 发布

android:加载html，太宽，适配解决方案。

首先改的话必须的改html，所以我们直接在代码里插入html，设置他自动适配手机屏幕的宽度。

String css = "<style type=\"text/css\"> " +
                "img {" +
                "width:100%;" +//图片宽度填充屏幕
                "height:auto;" +//图片高度自动
                "}" +
                "body {" +
                "word-break:break-all;"+//允许自动换行
                "}" +
                "</style>";
        String html = "<html><head>" +
                "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">"+
                css+"</head>"+
                "<body>"+html+"</body></html>";

然后设置WebView就可以了

wvContent.loadDataWithBaseURL(null,html, "text/html","utf-8",null);
//设置屏幕自适应
 WebSettings webSettings = wvContent.getSettings();
 webSettings.setJavaScriptEnabled(true);//开启加载js
 webSettings.setUseWideViewPort(true);
 webSettings.setLoadWithOverviewMode(true);
        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);

只是淡出这么设置可以解决大部分html，太宽出现滑动条的问题了，但是今天遇到一个情况，传给我的html代码是个table表格，html直接把table表格的宽度写死了，即使这么设置了也不能自适应，所以这时候就需要使用js拿到对应table标签，手动进行修改宽度了，修改宽度为100%，即适应父布局宽度。
完整代码如下。

String css = "<style type=\"text/css\"> " +
                "img {" +
                "width:100%;" +//图片宽度填充屏幕
                "height:auto;" +//图片高度自动
                "}" +
                "body {" +
                "word-break:break-all;"+//允许自动换行
                "}" +
                "</style>";
        //查看了接口的html 把table的width写死了  使用js调整
        String js = "<script type=\"text/javascript\">\n" +
                "var tables = document.getElementsByTagName('table');\n" +
                "    for(var i=0;i<tables.length;i++)\n" +
                "    {\n" +
                "        tables[i].style.width = 100+\"%\";\n" +
                "    }\n" +
                "</script >";
        String html = "<html><head>" +
                "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">"+
                css+"</head>"+
                "<body>"+html+"</body>"+js+"</html>";
        wvContent.loadDataWithBaseURL(null,html, "text/html","utf-8",null);
        //设置屏幕自适应
        WebSettings webSettings = wvContent.getSettings();
        webSettings.setJavaScriptEnabled(true);//开启加载js
        webSettings.setUseWideViewPort(true);
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);