2

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

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

有什么建议么？

4

3 回答 3

5

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

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

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

于 2015-10-15T17:06:11.687 回答
1

注意到了同样的事情。在某些电子邮件模板上对我有用的是删除 min-width 并添加内联样式 margin: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>
于 2015-08-05T20:49:54.253 回答
0

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

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

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

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

于 2015-04-25T02:01:47.477 回答