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

向右看齐 2022-12-01 04:00 257阅读 0赞

## 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);