15

我正在布置一封电子邮件，以便在浏览器和移动平台上查看，并且大部分都进​​展顺利。它以表格形式排列，使用内联样式等。然而，尽管媒体查询的最大宽度为 600px，但至少我和我可以访问的另一个 Android 上的 Gmail 应用程序选择调整图像大小和布局以适应其区域，而不是使用媒体查询或让它正常适应窗口，这两种方法都可以。

对于个人用途，我可以在手机上“关闭自动调整大小”，然后电子邮件会像在浏览器中一样显示。

有没有办法告诉 Gmail 应用程序不要自动调整电子邮件大小或使用媒体查询？

4

4 回答 4

17

正如谷歌自己（原文如此！）在这里你应该在你的模板顶部添加一个小技巧，就在你的<body>标签之后：

<!-- Gmail hack -->
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff; line-height:0; width:600px !important; min-width:600px !important; max-width:600px !important;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
<!-- /Gmail hack -->

由于 Gmail 和 Inbox 会忽略display:none，因此黑客只会影响这两个客户端。

于 2015-06-09T16:04:33.037 回答
13 
<meta name="viewport" content="width=device-width, initial-scale=1"/>

然后在style跨越整个页面宽度的图像（1px gif 有效）上设置属性 ( style="min-width:600px;")。一切都将正确布局，并且可以滚动。

Gmail 通常不支持媒体查询或样式标签，这就是为什么我们必须内联移动所有内容。

于 2013-08-22T19:41:49.207 回答
9

受css-tricks.com的启发，这段代码解决了我的问题。把它放在前面</body>。

<table class="gmail-app-fix">
    <tr>
        <td>
            <table cellpadding="0" cellspacing="0" border="0" align="center" width="600">
                <tr>
                    <td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
                        <img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
                    </td>
                    <td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
                        <img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
                    </td>
                    <td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
                        <img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

（在 Android 5.0.1 上使用 Gmail 6.0 和 Inbox 1.20 进行测试，分辨率 720x1280（纵向和横向均可使用））。

于 2016-03-30T20:18:36.980 回答
0

我刚刚添加了 style="min-width:290px;" 到我最外面的表格，这是我的响应式电子邮件视图的最小尺寸，它停止移动我的块并且不会自动调整大小。这意味着在 Gmail 应用程序中，电子邮件显示为整封电子邮件。

于 2015-10-22T12:23:46.363 回答