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

问题描述

我创建了一个响应式电子邮件模板，适用于所有网络客户端、所有版本的 Outlook、苹果邮件、雷鸟、iOS、HTC 的邮件"应用程序以及几乎所有其他内容，除了 Lotus Notes.

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% 的单列电子邮件.您可以添加 max-width 解决方法来限制其在桌面上的宽度.所有主要客户都 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屋！