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