我的@media唯一代码不适用于响应式电子邮件模板 [英] My @media only code isn't working for a responsive email template
问题描述
我的目标是在使用台式机和手机打开的电子邮件中使用不同的字体大小。我正在使用颜色而不是字体大小来测试我的代码，因为它们更容易区分。台式机和平板电脑的颜色应为红色，手机上的颜色应为绿色。
以下是我的代码工作的设备和应用程序，文本为绿色：
1. iPhone上的本机邮件应用程序6S 9.2
2. LG Leon上的本机邮件应用程序（Android）
以下是我的代码所没有的设备和应用程序工作，文本是红色（与桌面相同）或黑色：
1. iPhone 6上的Gmail应用程序9.1
2. gmail应用程序适用于Android 5的中兴Axon应用程序
3.三星Galaxy S6上安装了Android 4的gmail应用程序
我在测试过程中遇到其他问题，这让我觉得有些电子邮件提供商（比如gmail）忽略了风格之间的任何东西;标签，但这是每个人都这样做的方式根据我的代码的很多例子。
这是代码：
My goal is to have different font sizes in email messages opened with desktops and phones. I'm testing my code using colors rather than font sizes because they are easier to distinguish. The color should be red on desktops and tablets and green on phones.
Here are the devices and applications where my code works, and the text is green:
1. The native mail app on the iPhone 6S 9.2
2. The native mail app on an LG Leon (Android)
Here are the devices and applications where my code does not work, and the text is either red (the same as on a desktop) or black:
1. The gmail app on the iPhone 6 9.1
2. The gmail app app on the ZTE Axon with Android 5
3. The gmail app on the Samsung Galaxy S6 with Android 4
3. The native app on the Nokia Lumia 929 8.1 Windows phone
I'm having other problems during testing that are leading me to believe that some email providers (like gmail) are ignoring anything between style; tags, but that's the way everyone is doing this according to the very many examples of code I have.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<style>
td { font-family:verdana; font-size:16px; color:#e51b24; }
@media only screen and (min-device-width: 320px) and (max-device-width: 541px) {
td { color: #0ade27 !important; }
}
</style>
<table class="content" align="left" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width: 540px;">
<tr>
<td style="text-align:justify;">[VERSION 15. Mobile features: Green font #0ae27. Desktop features specified in style section: font-family:verdana; font-size:16px; color:#e51b24;. Desktop features specified inline in td: text-align:justify;. Line-height is unspecified. Alignment is left. Content class is empty. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est.]
</td>
</tr>
</table>
</body>
</html>
推荐答案
每个电子邮件客户端都有它自己的怪癖，即使你的HTML在浏览器中完全有效，电子邮件客户端可能会忽略它或做一些时髦的事情。我发现测试电子邮件布局的最佳方法是使用此站点：电子邮件测试和电子邮件营销分析 - Litmus [ ^ ]
Each email client has it's own quirks, even though your HTML may be perfectly valid in a browser an email client may simply ignore it or do something funky with it. I found the best way to test email layouts was using this site: Email Testing and Email Marketing Analytics - Litmus[^]
这篇关于我的@media唯一代码不适用于响应式电子邮件模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
