html - 如何让这个响应式 CSS 在 Gmail for Android 上运行?

标签 html css email gmail html-email

我稍微修改了 Litmus.com 为我自己的元素创建的响应式电子邮件模板。在开发人员工具移动 View 中查看时,它的行为与我在浏览器 (Chrome) 中的预期一致。但是,在 Android 7.1.2 Nougat 的 Gmail 应用程序(不是 imap 帐户)中查看时,设计看起来非常不同。我想看看发生了什么,但我无法深入了解,因为无法查看应用程序上呈现的代码。

例如,文本未居中对齐,图像看起来很小,按钮未跨越整个宽度。这是 Chrome 中的移动 View 与 Android 版 Gmail 应用程序并排比较的屏幕截图。

enter image description here

我从各种来源了解到 Gmail 应用程序支持通过媒体查询响应式 CSS,所以我很困惑。我已经为此工作了很长一段时间,并且感到卡住了。非常感谢任何有关解决方案或正确方向建议的帮助。

这是我的代码。 https://codepen.io/anon/pen/mMoNqm

<!DOCTYPE html>   

最佳答案

看起来您的电子邮件正在通过混合编码堆叠列,但通过媒体查询进行的对齐并未生效。这可能是因为媒体查询支持没有扩展到每个 Gmail 电子邮件产品。根据 Android 版本和电子邮件类型(您的电子邮件是 POP 帐户吗?),任何在某些 Gmail 产品仍会忽略媒体查询。

以下是部署情况的快速分割: enter image description here

More info and updated charts on Litmus

关于html - 如何让这个响应式 CSS 在 Gmail for Android 上运行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46051727/

相关文章:

html - FontAwesome 图标 fa-plus 不可见

css缩放翻译元素而不移动

html - 我可以检测 outlook 客户端并更改我的 html 电子邮件的样式吗?

JavaMail 无法连接到 SMTP 主机 SSL 465 : handshake_failure

javascript - 将文本链接转换为超链接和 anchor 文本

html - 将下拉菜单标题与下拉菜单对齐

javascript - 使用javascript代码从HTML的select标签中读取选定的值

html - 在 iframe 内外应用的 CSS 样式表

amazon-web-services - Amazon SES 535 身份验证凭据尝试轮换访问 key 无效

html - 在本地主机中无法加载外部 css