Android WebView 显示富文本图片显示过大

1.接口返回中的图片,在webView 中显示的图片宽度不一样,webView 中显示的图片要比实际图片大很多 

doc = Jsoup.parse(htmlStr);

        //修改视频标签
        Elements embeds = doc.getElementsByTag("embed");
        for (Element element : embeds) {
            //宽度填充手机,高度自适应
            element.attr("width", "100%").attr("height", "auto");
        }
        //webview 无法正确识别 embed 为视频,所以这里把这个标签改成 video 手机就可以识别了
        doc.select("embed").tagName("video");

        //控制图片的大小
        imgs = doc.getElementsByTag("img");

        for (int i = 0; i < imgs.size(); i++) {
            //imgs.get(i).attr("max-width", "100%").attr("height", "auto");
            imgs.get(i).attr("style", "max-width: 100%; height: auto;");
        }

        webView.loadDataWithBaseURL(null, doc.toString(), "text/html", "UTF-8", null);

2.同时设置了width和max-width两个属性,则以下面规则显示宽度

     (1)当width元素小于max-width时,元素宽度以width为准

     (2)、若超过max-width则以max-width为准。

     例

    (1)、若width100px; max-width:400px;则宽度为100px;

     (2)、若width:500px;max-width:400px,则宽度为400px;

      当然若width和max-width同为px或者rem等固定单位,则没有必要同时设置两个属性。

     (3)、若width:100%;max-width:900px;  则含义为宽度为元素为父元素宽度的100%,但最大宽度不超过900px
 

如果 HTML 富文本中的表格没有显示网格,可能是因为表格的 CSS 样式设置了边框为 0,或者是因为浏览器默认的样式中将表格的边框隐藏了。为了显示表格网格,可以在 HTML 富文本中添加 CSS 样式,或者在 Android 中设置 `WebSettings` 相关属性。 在 HTML 富文本中添加 CSS 样式的示例代码如下: ```html <!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; border: 1px solid black; } th, td { border: 1px solid black; padding: 5px; } </style> </head> <body> <table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table> </body> </html> ``` 在 Android 中设置 `WebSettings` 相关属性的示例代码如下: ```java WebSettings webSettings = webView.getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setBuiltInZoomControls(true); webSettings.setDisplayZoomControls(false); webSettings.setSupportZoom(true); webSettings.setDefaultTextEncodingName("utf-8"); webSettings.setLoadsImagesAutomatically(true); webSettings.setUseWideViewPort(true); webSettings.setLoadWithOverviewMode(true); webSettings.setAllowFileAccess(true); webSettings.setAllowContentAccess(true); webSettings.setAllowFileAccessFromFileURLs(true); webSettings.setAllowUniversalAccessFromFileURLs(true); webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS); webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE); webSettings.setDomStorageEnabled(true); webSettings.setDatabaseEnabled(true); webSettings.setAppCacheEnabled(true); webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW); ``` 在上述代码中,主要是设置了 `WebSettings` 中与表格显示相关的属性,例如 `setJavaScriptEnabled()`、`setSupportZoom()`、`setLayoutAlgorithm()` 等,可以根据需求进行设置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值