logo标签列表

Gmail应用中有没有关闭自动调整电子邮件布局大小的方法？

androidhtmlmobileresponsive-designgmail
16

我正在制作一封电子邮件，希望能够在各种浏览器和移动平台上查看，目前大部分都很顺利。它是使用表格和内联样式等布局的。但是，即使有一个600像素的最大宽度媒体查询，至少在我的手机和另外一个Android手机上使用的Gmail应用程序选择调整图像和布局以适合其区域，而不是使用媒体查询或让它正常地适应窗口大小，其中任何一种都可以。

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

是否有一种方法告诉Gmail应用程序不要从电子邮件大小自动调整大小，或者使用媒体查询？

5个回答
18

就像Google自己在这里所做的一样，你应该在模板的顶部，在<body>标签之后添加一个小hack：

<!-- 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，因此此技巧仅影响这两个电子邮件客户端。

它适用于iOS Gmail应用程序，但不适用于Android Gmail应用程序。 - duchuy
糟糕..它在两个平台上都能正常工作，但现在我可以在我的安卓手机上重现这个问题。 - Matteo Antoci
@duchuy正在使用我的联想手机（960*540，安卓4.4）进行工作。 - brabertaser19
它在我的安卓手机上（Vivo Z1 Pro Funtouch OS）的 Gmail 应用程序中可以使用。 - vivek
13
<meta name="viewport" content="width=device-width, initial-scale=1"/>

在一张跨越整个页面的图片上 (1像素的 gif 图片即可)，设置 style 属性 (style="min-width:600px;")。这样就可以正确排版并且可以滚动。

通常 Gmail 不支持媒体查询或者样式标签，这就是为什么我们需要把所有东西都变成内联样式的原因。

不幸的是，我正在通过CRM作为电子邮件活动的中介，实际上无法将任何内容放入<head>中。虽然在我的测试中我没有看到它真正起作用，但是否有任何方法可以在<head>之外使用（或产生相同的效果）类似于元标记的东西而不会破坏互联网？ - Abernasty
哇，好的。我很少改变我的头部，那么你是否允许至少有一个全局'<head>'用于所有电子邮件？你可以将元标记放在<head>之外，但是我也不建议这样做。如果您通过电子邮件在酸或litmus上运行它，您可以看到它的外观。 Litmus免费使用一周，您可以查看所有客户端。如果您正在进行媒体查询/响应式电子邮件，则确实需要那个视口标记。在移动设备上横向滚动是大忌。默认邮件应用程序支持媒体查询和样式标签，如果您想测试的话。 - zazzyzeph
是的，我在使用“Email on Acid”，不幸的是，当经过CRM的改变条件时，似乎没有一个移动设备能够正确地解释它。但是，我确实在body顶部有viewport标签。 - Abernasty
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上，分辨率为720x1280的设备中，使用Gmail 6.0和Inbox 1.20进行测试（支持竖屏和横屏方向））。）
1
这是唯一对我有用的解决方案。我不需要 <img> 标签，只需要 <td> 就可以了。 - nikojpapa
1
这个解决方案否定了所有响应式布局 - 它是一个刚性的“支撑物”，从内部支撑布局并阻止响应性！它对我没有帮助。为了记录，我们在谈论 iOS Gmail 应用程序 6.0.210530。 - revelt
0
我刚刚在最外层的表格中添加了style="min-width:290px;"，这是我的响应式电子邮件视图中最小的尺寸，它停止了移动我的块并且不会自动调整大小。这意味着在Gmail应用程序中，该电子邮件将显示为完整的电子邮件。
你从哪里得到了290像素？ - St.G
有趣的是，在我的模板上，设置 min-width:290px 确实禁用了 iOS Gmail 应用程序 6.0.210530 中的“恢复自动调整大小”选项。布局仍然像以前一样混乱，在我的情况下，手动点击“恢复自动调整大小”确实可以解决问题。 - revelt
0
我的解决方案是在模板中的最外层表格应用 min-width: 600px。这适用于 Android Gmail 应用程序。（请注意，我的布局使用了 600 像素。您的布局可能不同）
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接