使用 Google 收件箱对 html 电子邮件进行编码(自动调整大小)

Question

尝试创建在移动应用中正确显示的电子邮件通讯，但Google收件箱的自动调整大小功能破坏了布局。

我尝试使用min-width内联每个元素（适用于 gmail 应用程序的技巧），但遗憾的是它在收件箱中没有效果。此外，与Gmail应用程序不同，没有选项可以在邮件中禁用自动调整大小。

有什么建议吗？

Answer 1

我遇到了同样的事情。事实证明，如果您使用 !important 声明，它会起作用。例如：

<div style="width: 100% !important; min-width: 100% !important;"></div>

这在Gmail应用程序和收件箱应用程序上对我有用。

Answer 2

注意到同样的事情。在某些电子邮件模板上对我有用的是删除最小宽度并添加边距：0 的内联样式自动;对于每个表，这至少会将内容从中心对齐。请参阅以下示例：

                    <table ${cell_reset} style="${table_reset} width: 300px; margin:0 auto;" width="300" class="container" align="left">
                      <tr>
                        <td style="width:300px;">
                        </td>
                      </tr>
                    </table>
                    <table ${cell_reset} style="${table_reset} width: 300px; margin:0 auto;" width="300" class="container" align="right">
                      <tr>
                        <td style="width:300px;">
                        </td>
                      </tr>
                    </table>

Answer 3

看起来你要做响应式网页设计。

我将从主容器宽度：100% 和标题中设置的视口开始：

<meta name="viewport" content="user-scalable=yes,width=device-width,initial-scale=1,maximum-scale=1">

然后将其余的div 或容器对齐为块或内联块，宽度为 %除非您特别想要div 的像素宽度。