如何在移动端保留mj-body默认宽度并禁用自动适配？

要让MJML的<mj-body>在移动端始终保持600px固定宽度，避免自动适配打乱百分比布局，你可以通过自定义CSS覆盖MJML默认的移动端媒体查询规则来实现，具体步骤如下：

核心实现方案 #

1. 给<mj-body>指定固定宽度并添加自定义CSS类
2. 编写内联样式，强制移动端下的容器和列宽度保持600px

完整MJML代码示例 #

<mjml>
  <mj-head>
    <mj-style inline="inline">
      <!-- 覆盖移动端默认适配规则 -->
      @media only screen and (max-width: 480px) {
        .fixed-width-container .mj-column-per-100 {
          width: 600px !important;
          max-width: 600px !important;
        }
        .fixed-width-container {
          width: 600px !important;
          min-width: 600px !important;
        }
      }
      <!-- 避免横向滚动条 -->
      html, body {
        overflow-x: hidden;
      }
    </mj-style>
    <!-- 给body绑定自定义类和固定宽度 -->
    <mj-attributes>
      <mj-body css-class="fixed-width-container" width="600px" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <!-- 你的原有内容（基于600px宽度的百分比布局） -->
    <mj-section>
      <mj-column>
        <mj-image width="50%" src="your-image-source.jpg" alt="示例图片" />
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

关键说明 #

• MJML默认会在屏幕宽度≤480px时，自动给列添加.mj-column-per-100类并设置宽度为100%，这就是导致你布局混乱的原因
• 通过媒体查询强制.mj-column-per-100和body容器的宽度为600px，让移动端的百分比计算基准和桌面端保持一致
• overflow-x: hidden用于隐藏超出屏幕的横向内容，避免出现滚动条影响体验

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