如何在 MJML 邮件中实现移动端隐藏列：兼容所有主流邮件客户端

本文详解如何在 MJML 中可靠地隐藏 mj-column 元素于移动设备，兼顾 Gmail IMAP、Outlook 桌面版及 iOS/Android 邮件客户端的兼容性，采用“移动优先 + 桌面覆盖”策略并结合内联样式与媒体查询。

本文详解如何在 mjml 中可靠地隐藏 `mj-column` 元素于移动设备，兼顾 gmail imap、outlook 桌面版及 ios/android 邮件客户端的兼容性，采用“移动优先 + 桌面覆盖”策略并结合内联样式与媒体查询。

在 HTML 邮件开发中，直接使用 display: none 于 <mj-column> 在多数邮件客户端（尤其是 Gmail IMAP、Outlook Desktop）中无效——这是因为这些客户端会忽略 <style> 标签中的 CSS 类选择器对布局容器（如列、表格单元格）的控制，且不支持现代 CSS 媒体查询对结构级元素的渲染干预。

✅ 正确方案是：移动优先 + 内联强制隐藏 + 桌面端媒体查询恢复显示。核心在于两点：

1. 使用 inline="inline" 的 <mj-style> 提供初始内联样式，确保 display: none !important 被几乎所有客户端解析并应用（包括 Gmail IMAP 和 Outlook）；
2. 配合标准 <mj-style> 中的 @media (min-width:480px) 查询，仅在桌面视口下将该列重置为 display: inline-block !important，从而实现“移动端隐藏、桌面端显示”的精准控制。

此外，为兼容 Outlook（基于 Microsoft Word 渲染引擎），需添加 mso-hide: none;（虽看似矛盾，但实际用于防止 Outlook 错误地继承隐藏行为，确保其能响应后续媒体查询）。

以下是经过 Litmus 全平台验证（Apple Mail、Outlook Desktop/iOS/Android、Gmail Web/iOS/Android/IMAP、Yahoo、Samsung Mail 等）的完整 MJML 示例：

<mjml>  <mj-head>    <!-- 移动端默认隐藏：通过 inline="inline" 强制内联生效 -->    <mj-style inline="inline">      .hidden {        display: none !important;        mso-hide: none;      }    </mj-style>    <!-- 桌面端恢复显示 -->    <mj-style>      @media only screen and (min-width: 480px) {        .hidden {          display: inline-block !important;        }      }      /* 移动端文本对齐优化（可选） */      @media only screen and (max-width: 480px) {        .mobile {          text-align: right !important;        }      }    </mj-style>  </mj-head>  <mj-body>    <mj-section background-color="#eee">      <mj-column>        <mj-text>          <p class="mobile">Title align right on mobile</p>        </mj-text>      </mj-column>      <!-- 此列在移动端完全隐藏，桌面端正常显示 -->      <mj-column css-class="hidden">        <mj-social font-size="15px" icon-size="30px" mode="horizontal">          <mj-social-element name="facebook" href="https://mjml.io/">            Facebook          </mj-social-element>          <mj-social-element name="google" href="https://mjml.io/">            Google          </mj-social-element>          <mj-social-element name="twitter" href="https://mjml.io/">            Twitter          </mj-social-element>        </mj-social>      </mj-column>    </mj-section>  </mj-body></mjml>

⚠️ 关键注意事项：

• 切勿仅依赖 @media (max-width:480px) 隐藏列：该方式在 Gmail IMAP、Outlook Desktop 等客户端完全失效；
• !important 必须保留：邮件客户端 CSS 优先级混乱，需强制覆盖默认行为；
• mso-hide: none 不可省略：专为 Outlook 设计，避免其错误屏蔽整个区块；
• 测试务必发送真邮件：MJML Live Editor 仅模拟浏览器环境，无法反映真实邮件客户端渲染结果；推荐使用 Litmus 或 Email on Acid 进行跨客户端截图验证；
• 若需更精细控制（如仅隐藏图标文字、保留占位等），可改用 <mj-group> + 条件注释（<!--[if !mso]><!-->）方案，但复杂度显著上升，本例推荐方案已覆盖 99% 场景。

该方法本质是利用 MJML 编译后生成的语义化 HTML 表格结构，通过内联样式锚定基础状态，再以媒体查询做桌面增强——既符合邮件开发“向后兼容”原则，又无需手写 hack 表格或条件注释，是当前最简洁、最鲁棒的解决方案。