使用 Google 个收件箱编码 html 个电子邮件（自动调整大小）

Question

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

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

有什么建议吗？

Answer 1

看来您要进行响应式网页设计。

我将从主容器 width:100% 开始，您的视口设置在 header:

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

然后将其余的 div 或容器对齐为宽度为 % 的块或内联块除非你特别想要 div.

的像素宽度

Answer 2

也注意到了同样的事情。在某些电子邮件模板上对我有用的是删除 min-width 并添加 margin:0 auto 的内联样式；对于每个 table，这至少会将内容居中对齐。请看下面的例子：

                    <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

我运行进入同样的东西。事实证明，如果您使用 !important 声明，它会起作用。例如：

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

这对我在 Gmail 应用程序和 Inbox 应用程序上有效。

使用 Google 个收件箱编码 html 个电子邮件（自动调整大小）

Coding html email with Google Inbox (auto-resizing)

html

css

email

google-inbox