WebView-合理的用法（避免文字乱码+文字大小适配）（一）

最新推荐文章于 2024-06-12 15:05:16 发布

原创最新推荐文章于 2024-06-12 15:05:16 发布 · 7.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Html5+WebView

Html5+WebView 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了使用WebView加载HTML内容时如何实现图片宽高自适应屏幕、指定字体大小的方法，并提供了一个通过CSS样式成功适配的例子。

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

---- 从本地加载+图片宽高自适应屏幕

  //设置自适应屏幕，两者合用
        settings.setUseWideViewPort(true); //将图片调整到适合webview的大小
        settings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小
        webView.loadDataWithBaseURL(null, htmlContent, "text/html", "utf-8", null);

如果使用loadData(htmlContent,"text/html","utf-8")；会出现文字乱码，

webView.loadData(htmlContent, "text/html", "utf-8");

---- 指定字体大小

 int fontSize = (int) getResources().getDimension(R.dimen.y28);
        Log.i(TAG, "initView: fontSize = " + fontSize);
        settings.setDefaultFontSize(fontSize);

---- 最好的适配方案是在Html5源代码中把样式配好。

----WebView比Browser功能要弱，核心目的是展示页面，官方介绍

It does not include any features of a fully developed web browser, such as navigation controls or an address bar.
 All that WebView does, by default, is show a web page.

==================

----- 一个成功的案例，依据 Html5 内容，借助css样式实现是适配，只用css即可，不需要webview的任何setting

 String origianlHtmlStr = result.getData().getContentList();
     
        String cssLayout = "<style>*{padding: 0;margin: 0}#webview_content_wrapper{margin: 10px 15px 0 15px;}
         p{color: #333333;line-height: 2em;font-size:14px;opacity: 1;}
         img {margin-top: 13px;margin-bottom: 15px;width: 100%;}</style>";
        String htmlModify = origianlHtmlStr.replaceAll("<br/>", "");
        String htmlcontent = cssLayout + "<body><div id='webview_content_wrapper'>" + htmlModify + "</div></body>";
        webView.loadDataWithBaseURL(null, htmlcontent, "text/html", "UTF-8", null);

------ origin html str

<p><span style="">华春莹在当天举行的外交部例行记者会上对《环球时报》记者表示，中方一直在关注日本福岛核泄漏极其后续影响。
“我注意到在福岛核事故发生六周年之际，日本国内媒体也在大量报道评论，总体认为日本政府在污染水和土壤及放射性废弃物处理方面缺乏有效手段，
向海洋排放核污水给周边海洋环境和民众健康带来隐患，有关对策滞后且信息公开不透明，食品安全等相关数据缺乏足够说服力。</span></p>
<div class="image-package"><img src="http://duty.oss-cn-shenzhen.aliyuncs.com/8380e6fa-db21-4b7c-83e1-34bff9ba89a0tyggh2.png" data-by-webuploader="true"/>
</div><p>表示，中方一直在关注日本福岛核泄漏极其后续影响。“我注意到在福岛核事故发生六周年之际，日本国内媒体也在大量报道评论，
总体认为日本政府在污染水和土壤及放射性废弃物处理方面缺乏有效手段，向海洋排放核污水给周边海洋环境和民众健康带来隐患，
有关对策滞后且信息公开不透明，食品安全等相关数据缺乏足够说服力。</p><div class="image-package">
<img src="http://duty.oss-cn-shenzhen.aliyuncs.com/b25eaee8-f133-4618-9411-94685f4ae2detyggh4.png" data-by-webuploader="true"/></div>
<div class="image-package"><img src="http://duty.oss-cn-shenzhen.aliyuncs.com/726d283c-8c8d-4e34-916b-52a78bca3ba0tyggh1.png" data-by-webuploader="true"/>
</div><p><span style=""></span><br/></p>

------- 之前添加了以下的setting+以上css适配导致错误

 settings.setUseWideViewPort(true); //将图片调整到适合webview的大小
  settings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小