如何让Emarsys邮件在移动设备上呈现一致的显示效果？

一、解决谷歌账号移动端文字极小问题 #

• 给所有文本元素强制内联设置字体大小，邮件客户端（尤其是Gmail）对CSS继承支持极差，不要依赖body或父元素样式。比如在<font>或文本容器标签里直接加style="font-size: 16px;"，移动端通过媒体查询强制放大：

  @media only screen and (max-width: 414px) {
    .CTAtext, td, font, p {
      font-size: 18px !important;
      -webkit-text-size-adjust: 100% !important;
    }
  }
  

• 避免使用em/rem等相对单位，直接用px，防止Gmail默认样式覆盖。
• 在邮件头部添加<meta name="viewport" content="width=device-width, initial-scale=1.0">，强制移动端适配规则生效。

二、修复工作账号按钮样式错乱问题 #

你的按钮代码存在几个核心问题，直接导致渲染异常：

1. 嵌套<a>标签冲突：外层<a>包裹整个table，内层又嵌套<a>，会触发Gmail的链接解析规则冲突，直接删除外层<a>即可。
2. 类样式失效风险：Gmail会过滤多数非内联的类样式，把buttonPadding、ctaStyle的样式直接内联到对应元素。
3. 标签未闭合：代码里的<tr>标签未完全闭合，会导致结构解析错乱。

修正后的按钮代码示例： #

<e-optional name="CTA">
  <tr>
    <td align="{variables.ctaAlign}">
      <table cellpadding="0" cellspacing="0" valign="middle" style="border-collapse: collapse;">
        <tr>
          <td align="center" style="padding: 12px 24px; background-color: {variables.standardBlockBackgroundColour}; border-radius: 4px;">
            <a href="" e-editable="url1_S4" target="_blank" style="text-decoration: none;">
              <font e-editable="link_text1_S4" style="color: #ffffff; font-size: 16px; font-weight: 600;">
                CTA LOREM IPSUM
              </font>
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</e-optional>

三、通用邮件适配注意事项 #

• 所有CSS样式优先内联编写，Gmail仅保留<head>里的媒体查询样式，其余类样式大概率被过滤，必要时用!important强制覆盖默认规则。
• 测试时确保使用Gmail原生安卓客户端（而非网页版），不同账号可能因企业政策、客户端版本差异导致渲染逻辑不同，尽量统一测试环境。
• 避免使用子选择器、伪类等高级CSS语法，Gmail仅支持基础元素/类选择器。

内容的提问来源于stack exchange，提问作者Milena Tsoneva