MJML按钮：如何实现全区域可点击且适配移动端？

以下是几个经过验证的可行方案，兼顾全区域点击需求与移动端适配：

方案1：利用MJML按钮原生属性优化点击区域 #

保留按钮宽度为100%以适配移动端，通过调整内边距确保点击事件覆盖整个按钮容器，不要在<mj-button>内部嵌套额外的<a>标签：

<mj-section>
  <mj-column>
    <mj-button 
      href="https://your-target-url.com"
      width="100%"
      padding="16px 0"
      inner-padding="0"
      background-color="#007bff"
      color="#ffffff"
      font-size="16px"
    >
      立即查看
    </mj-button>
  </mj-column>
</mj-section>

• 核心逻辑：MJML的<mj-button>会自动生成带点击绑定的容器，通过padding撑开按钮可视区域，确保点击事件绑定到整个容器而非仅文字部分。

方案2：原生HTML表格模拟（兼容旧邮件客户端） #

针对部分对MJML按钮支持不佳的旧客户端，用MJML的<mj-raw>包裹原生响应式表格，强制实现全区域点击：

<mj-section>
  <mj-column>
    <mj-raw>
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="center" bgcolor="#007bff" style="padding: 16px 0; border-radius: 4px;">
            <a href="https://your-target-url.com" style="display: block; width: 100%; color: #ffffff; font-size: 16px; text-decoration: none; text-align: center;">
              立即查看
            </a>
          </td>
        </tr>
      </table>
    </mj-raw>
  </mj-column>
</mj-section>

• 核心逻辑：将<a>标签设为display: block; width: 100%;，使其完全填满父级表格单元格，实现全区域点击；表格宽度设为100%保证移动端自适应。

方案3：断点式响应宽度（兼顾固定宽与移动端） #

如果需要大屏显示固定宽度按钮，可通过MJML的断点设置，让按钮在小屏自动切换为全宽：

<mj-head>
  <mj-breakpoint width="600px" />
</mj-head>
<mj-section>
  <mj-column>
    <mj-button 
      href="https://your-target-url.com"
      width="320px"
      media-width="100%"
      padding="16px 0"
      background-color="#007bff"
      color="#ffffff"
      font-size="16px"
    >
      立即查看
    </mj-button>
  </mj-column>
</mj-section>

• 核心逻辑：media-width属性会在屏幕宽度小于断点值时，将按钮宽度替换为100%，既满足大屏固定宽度需求，又保证移动端全宽适配，同时点击区域覆盖整个按钮。

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