Android端HTML文件显示异常：直接展示源码（iOS端渲染正常）

问题现象 #

iOS设备访问页面时可正常渲染HTML文本，Android设备直接显示包含标签在内的完整HTML源码，涉及的HTML片段如下：

<div>
<p style="margin-bottom: 14pt; line-height: normal; font-size: 14pt;"><span style="font-family: Verdana;">The APP</span></p>
<p style="margin-top: 14pt; margin-bottom: 14pt; line-height: normal; font-size: 14pt;"><span style="font-family: Verdana; font-weight: bold;">Date: 12.03.2022</span></p>
</div>

排查与解决步骤 #

• 检查HTTP响应头的Content-Type
  Android的WebView对响应头的MIME类型要求更严格，必须确保服务器返回的Content-Type为text/html; charset=utf-8。如果设置成text/plain，WebView会直接将内容当作纯文本显示，不会渲染HTML。

• 补全完整的HTML文档结构
  现有代码仅为HTML片段，缺少标准的文档结构，部分Android WebView可能无法识别为可渲染的HTML页面。补全后的完整结构如下：

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
  </head>
  <body>
      <div>
          <p style="margin-bottom: 14pt; line-height: normal; font-size: 14pt;"><span style="font-family: Verdana;">The APP</span></p>
          <p style="margin-top: 14pt; margin-bottom: 14pt; line-height: normal; font-size: 14pt;"><span style="font-family: Verdana; font-weight: bold;">Date: 12.03.2022</span></p>
      </div>
  </body>
  </html>
  

• 检查Android WebView配置（若为原生APP场景）
  如果是在Android原生APP的WebView中加载页面，需确保：

  • 未将WebView设置为纯文本模式；
  • 使用loadDataWithBaseURL方法加载HTML时，指定正确的MIME类型为text/html，编码为utf-8；
  • 必要时启用JavaScript（若页面依赖JS渲染）。

• 排查转义字符问题
  确认服务器返回的HTML没有被不必要的转义，比如将<转成<、>转成>。这种转义会让WebView把标签当作普通文本显示，需确保输出的是原始HTML标签。

内容的提问来源于stack exchange，提问作者Alexandra Didenco