解决Android Webview加载Html富文本，h5字体样式不起作用问题

最新推荐文章于 2023-11-14 17:26:34 发布

原创最新推荐文章于 2023-11-14 17:26:34 发布 · 6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android #webview #h5

WebView相关专栏收录该内容

2 篇文章

订阅专栏

当在Android WebView中加载包含H5的富文本时，发现预设的字体大小样式无法正常显示。通过在HTML代码头部添加相应样式，并正确配置WebView，成功解决了字体大小一致的问题。

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

问题起因：WebView作为整个页面的一个部分展示，展示的是一段H5片段（Html中body标签中的部分）

问题描述：H5前端设置好的字体大小，在WebView中展示时不起作用，导致字体大小都一样

问题解决的方法：给这段HTML代码段，添加头部

  /**
     * 富文本适配
     */
    private String getHtmlData(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:auto; height:auto;}</style>"
                + "</head>";
        return "<html>" + head + "<body>" + bodyHTML + "</body></html>";
    }

传入的参数就是需要展示的HTML代码片段

顺便贴一下我的Webview配置

 private void initWebView() {
        //支持javascript
        mWebView.removeJavascriptInterface("searchBoxJavaBridge_");
        mWebView.removeJavascriptInterface("accessibility");
        mWebView.removeJavascriptInterface("accessibilityTraversal");

        mWebView.getSettings().setJavaScriptEnabled(false);
        // 设置可以支持缩放
        mWebView.getSettings().setSupportZoom(false);
        //关闭保存密码功能，安全监测要求添加
        mWebView.getSettings().setSavePassword(false);
        mWebView.getSettings().setAllowFileAccess(false);
        //设置出现缩放工具
        mWebView.getSettings().setBuiltInZoomControls(true);
        //扩大比例的缩放
        mWebView.getSettings().setUseWideViewPort(true);
        //自适应屏幕
        mWebView.getSettings().setLoadWithOverviewMode(true);
        if (Build.VERSION.SDK_INT >= 19)
            mWebView.getSettings().setLayoutAlgorithm(android.webkit.WebSettings.LayoutAlgorithm.TEXT_AUTOSIZING);
        else {
            mWebView.getSettings().setLayoutAlgorithm(android.webkit.WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        }
    }

这样就解决啦