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>