安卓端Zoho Mail应用忽略HTML邮件pre标签问题咨询

同类问题反馈 #

• 已有大量开发HTML自动化通知邮件的开发者遇到过Zoho Mail安卓端<pre>标签渲染异常的问题，除了格式丢失外，部分场景下还会出现<code>标签的等宽字体样式被覆盖、行间距异常的问题。

Zoho Mail移动端屏蔽<pre>的原因 #

• 基本可以确认是为了避免<pre>默认的不换行特性导致超长内容撑破移动端邮件容器，产生横向滚动条影响阅读体验，Zoho Mail安卓端的渲染引擎会直接强制改写<pre>标签的默认样式：将white-space属性修改为normal，同时移除默认的等宽字体、边距、行间距配置，视觉上就像是<pre>标签被完全忽略。桌面端因为屏幕宽度充足，不会触发这一强制改写逻辑，所以显示正常。

存在同类逻辑的其他邮件客户端 #

• 这类为了移动端适配强制改写<pre>样式的逻辑并不少见，早年的Gmail安卓端、旧版本iOS自带邮件应用都采用过类似的处理方案，只是目前大部分主流邮件客户端已经优化为给<pre>标签默认添加overflow-x: auto属性来处理超长内容，不再直接清除<pre>的格式配置，只有少部分客户端仍在使用这类粗暴的适配方案。

适配解决方案 #

如果要兼容Zoho Mail安卓端的渲染，可以采用两种方案：

1. 给<pre>标签添加全兼容的内联样式，强制保留格式同时允许自动折行，避免触发客户端的样式改写逻辑：

<pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; font-family: monospace; margin: 1em 0;">
<!-- 日志内容 -->
</pre>

2. 放弃使用<pre>标签，每一条日志单独使用<p>标签包裹，给<p>添加内联的等宽字体、固定行间距样式，也能实现和<pre>一致的展示效果，兼容性更强。

内容的提问来源于stack exchange，提问作者Jonathan Wood