Question

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

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

有什么建议吗？

Answer 1

我遇到了同样的事情。事实证明，如果你使用!important声明，它就可以了。例如：

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

这适用于Gmail应用和收件箱应用。

Answer 2

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

                    <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的像素宽度。

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

3 个答案: