我正在布置一封电子邮件,以便在浏览器和移动平台上查看,并且大部分都进展顺利。它以表格形式排列,使用内联样式等。然而,尽管媒体查询的最大宽度为 600px,但至少我和我可以访问的另一个 Android 上的 Gmail 应用程序选择调整图像大小和布局以适应其区域,而不是使用媒体查询或让它正常适应窗口,这两种方法都可以。
对于个人用途,我可以在手机上“关闭自动调整大小”,然后电子邮件会像在浏览器中一样显示。
有没有办法告诉 Gmail 应用程序不要自动调整电子邮件大小或使用媒体查询?
我正在布置一封电子邮件,以便在浏览器和移动平台上查看,并且大部分都进展顺利。它以表格形式排列,使用内联样式等。然而,尽管媒体查询的最大宽度为 600px,但至少我和我可以访问的另一个 Android 上的 Gmail 应用程序选择调整图像大小和布局以适应其区域,而不是使用媒体查询或让它正常适应窗口,这两种方法都可以。
对于个人用途,我可以在手机上“关闭自动调整大小”,然后电子邮件会像在浏览器中一样显示。
有没有办法告诉 Gmail 应用程序不要自动调整电子邮件大小或使用媒体查询?
正如谷歌自己(原文如此!)在这里你应该在你的模板顶部添加一个小技巧,就在你的<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;"> </div>
<!-- /Gmail hack -->
由于 Gmail 和 Inbox 会忽略display:none
,因此黑客只会影响这两个客户端。
<meta name="viewport" content="width=device-width, initial-scale=1"/>
然后在style
跨越整个页面宽度的图像(1px gif 有效)上设置属性 ( style="min-width:600px;"
)。一切都将正确布局,并且可以滚动。
Gmail 通常不支持媒体查询或样式标签,这就是为什么我们必须内联移动所有内容。
受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(纵向和横向均可使用))。
我刚刚添加了 style="min-width:290px;" 到我最外面的表格,这是我的响应式电子邮件视图的最小尺寸,它停止移动我的块并且不会自动调整大小。这意味着在 Gmail 应用程序中,电子邮件显示为整封电子邮件。