响应式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客户端都不支持媒体查询。