WebView加载富文本时页面右边显示空白的问题

zhimingwen

于 2021-10-12 11:59:14 发布

阅读量811

点赞数

分类专栏：踩坑填坑文章标签： webview html html5

本文链接：https://blog.csdn.net/Jackson_Wen/article/details/120720753

版权

踩坑填坑专栏收录该内容

6 篇文章

订阅专栏

本文探讨了在Android WebView中加载富文本时遇到的两个常见问题：内容宽度限制和字体显示不一致。为了解决这些问题，提出了通过在HTML头部添加viewport元标签和自定义样式来实现内容自适应屏幕宽度，并确保字体大小与后台配置一致。通过使用`loadDataWithBaseURL`方法结合格式化HTML数据的方法，可以有效地改善WebView的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

我们都知道，WebView加载数据的方式有两种：

webView.loadUrl(data);//加载url
webView.loadDataWithBaseURL(null,data, "text/html" , "utf-8", null);//加载html数据

加载富文本数据所以选择第二种方式：loadDataWithBaseURL。
开发过程中发现2个问题：
1，在很多安卓手机上你会发现文本内容宽度只显示屏幕宽度的一半或60%左右，页面右边是空白的，这样就很难看了，我们期望结果是富文本内容能自适应屏幕宽度，展示100%宽度。
2，手机上字体大小显示与后台配置的富文本大小显示不一致。

解决办法：

private String formatHtmlData(String bodyHTML) {
        String head = "<head>"
                + "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"> "
                + "<style>img{max-width: 100%; width:100%; height:auto;}*{margin:0px;}</style>"
                + "</head>";
        return "<html>" + head + "<body>" + bodyHTML + "</body></html>";
    }

webView.loadDataWithBaseURL(null,formatHtmlData(data), "text/html" , "utf-8", null)