html - 响应式 CSS 媒体查询被 gmail 忽略

Question

我正在使用 Gmail 和 chrome 开发工具(响应式，382x661)，我的电子邮件模板 CSS 被忽略了。

在标题中我有:

 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

我的 CSS:

@media screen and (max-device-width:500px), screen and (max-width:500px) {
/* css */
}

我的响应式 CSS 被忽略，电子邮件模板以桌面模式显示。

我该如何解决？

Answer 1

根据您居住的地方和您哪个您正在检查此电子邮件的 Gmail 客户端，media-queries 可能仍然不受支持。

2016 年底，美国的 Gmail 帐户开始看到媒体查询支持，而英国的帐户则没有。英国已获得媒体查询支持，但可能尚未涵盖世界所有其他地区。

Gmail 也基于 Gmail 产品推出。以下是目前部署情况的快速分割:

More info and updated charts on Litmus

---

无论您身在何处，每个 Gmail 客户端都不支持媒体查询。