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 回答