Gmail应用（Android）上的响应式电子邮件 [英] Responsive emails on Gmail app (Android)

问题描述

我创建了一个响应式的电子邮件模板，可以在所有的网络客户端，所有版本的Outlook，苹果邮件，雷鸟，iOS，HTC的邮件应用程序和几乎所有其他的东西减去Lotus笔记。

I have created a responsive email template which works in all web clients, all versions of outlook, apple mail, thunderbird, iOS, HTC's 'Mail' app and nearly everything else minus Lotus notes.

在Android上的Gmail应用程式无效。我很确定这是因为gmail剥离了标题（包含媒体查询）中的所有css，以便显示标准Web版本，但窗口是移动大小，因此它显示大约300px一半的电子邮件。有没有强制它使用媒体查询？是否有办法改变视口？

Is does not work forthe Gmail app on Android. I am pretty sure this is because gmail strips out all the css in header (which contains the media query) so it to show the standard web version but the window is mobile size, so it shows about 300px half the email. Is there anyway to force it to use the media query? Failing that is there a way to change viewport? What would be the best fall back option?

谢谢！

推荐答案

没有使用媒体查询的解决方法，因为它们不能内联。不幸的是，Gmail没有关于响应式电子邮件的解决方案（假设响应=媒体查询）。

There is no workaround using media queries as they can't be inlined. Unfortunately there is no solution for Gmail regarding responsive email (assuming responsive=media queries).

以下是替代方案：

1. 流体布局 - 基于百分比的布局 - 通常是100％的单列电子邮件。您可以添加最大宽度的解决方法来限制其在桌面上的宽度。这是所有主要客户100％的支持，是我认为的HTML电子邮件的最佳技术。


2. 对齐表 - 这比响应更适应 。与浮动div相同。表格中的HTML $ align =left属性在主要电子邮件客户端中更为一致，因为 float 的支持有限。


3. 保持向左 - 只需设计您的电子邮件，所有重要的东西在左侧。设备将始终显示最左边的300个像素，因此分隔列，文本左，图像右侧布局可能是合适的。

1. Fluid layout - A percentage based layout - usually a single column email that is 100%. You can add max-width workarounds to limit its width on desktops. This is 100% supported in all major clients and is the best technique for HTML email in my opinion.
2. Aligned tables - this is more 'adaptive' than responsive. Works the same as floating divs. HTML's align="left" attribute in a table works more consistently in major email clients, as float has limited support.
3. Keep to the left - Simply design your email with all the important stuff to the left side. Devices will always show the left most 300 or so pixels, so a split column, text left, image right layout may be appropriate.

你可以找到几个流体和浮动/对齐的例子这里。

You can find several examples of fluid and float/align here.

这篇关于Gmail应用（Android）上的响应式电子邮件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！