如何让我的响应式电子邮件在 Gmail 中正常工作?

Max*_*Max 4 css gmail html-email media-queries

我无法获取电子邮件模板以在 Gmail 上显示移动版本。我在这里尝试了不同帖子中的不同解决方案,但没有任何效果。该电子邮件在 Apple Mail 甚至 Samsung Mail 中都有响应。我在下面包含了CSS,任何帮助将不胜感激,因为我已经在这个问题上停留了至少一年了。

<style type="text/css">
@media only screen and (max-width: 600px) {
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body[yahoo] .all {
width: 355px !important;
}
body[yahoo] .no-mobile {
text-indent: -99999em !important;
display: none !important;
}
body[yahoo] .mobile-only {
text-indent: 0 !important;
display: block !important;
height: auto !important;
visibility: visible !important;
overflow: visible !important;
max-height: none !important;
}   
Run Code Online (Sandbox Code Playgroud)

}

小智 7

我看到的第一件事就是[yahoo]黑客攻击。Gmail 不支持属性选择器。自 2015 年 3 月起,黑客[yahoo]本身就不再需要了

\n

关于 Gmail 需要注意的第二件事是,并非所有版本的 Gmail 都支持<style>媒体查询。如果您使用非 Gmail 帐户(例如 Outlook.com 电子邮件地址)在 Gmail 移动网络邮件或 Gmail 应用程序(iOS 或 Android)上进行测试,则那里将不支持媒体查询。我在这里写过相关内容:尝试了解 Gmail CSS 支持

\n

这里\xe2\x80\x99是一个完整的代码示例,可在具有 Gmail 帐户的 Gmail 桌面网络邮件和移动应用程序(iOS 或 Android)中使用。Here\xe2\x80\x99s是一个测试 Email on Acid 预览的链接

\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>How do I get my responsive email to work in Gmail?</title>\n    <style>\n        @media only screen and (max-width: 600px) {\n            .all {\n                width: 355px !important;\n            }\n            .no-mobile {\n                text-indent: -99999em !important;\n                display: none !important;\n            }\n            .mobile-only {\n                text-indent: 0 !important;\n                display: block !important;\n                height: auto !important;\n                visibility: visible !important;\n                overflow: visible !important;\n                max-height: none !important;\n            }\n        }\n    </style>\n</head>\n<body>\n    <div class="all" style="background:green;">.all</div>\n    <div class="no-mobile" style="background:orange;">.no-mobile</div>\n    <div class="mobile-only" style="background:purple; display:none">.mobile-only</div>\n</body>\n</html>\n
Run Code Online (Sandbox Code Playgroud)\n