EoA Mobile TIP
Android
Coding tips for Android’s mobile email platforms, including Android 4.4.4 and Android 5, as well as Android’s Gmail/Gmail 5X, Outlook and Yahoo apps.
1. Can I write CSS that will only render on mobile devices?
Yes. You can use media queries in your embedded CSS.
For example:
@media only screen and (max-device-width: 480px) {
/* Here you can include rules for the Android and
iPhone native email clients.
*/
}
@media only screen and (min-device-width: 768px) {
/* Here you can include rules for the iPad native
email client.
*/
}
Media queries will not work in the Gmail app.
2. How do I resize images to better fit a mobile screen?
To resize the image on mobile, try the code below.
<style type="text/css">
@media only screen and (max-device-width:480px;) {
.header { width:300px;height:50px;}
}
</style>
<body>
<img src="https://www.example.com/image.jpg" class="header" width="600" height="100" />
</body>
3. How do I stop my text from wrapping inside the viewport?
Android wraps text for easier readability.
If the box element parent of the text string is set to align: right or center, the text will not wrap within it. It’s important to point out, that <font> and <span> are not considered box elements. Instead, you would add the alignment to its containing <td>, <div>, or <p>.
Another workaround is to set the box element parent’s line-height to a value that is equal to or lesser than the font-size within the container.
4. My fonts are enlarged on this device. How do I stop that from happening?
To control the font adjustment in the Android universally, try adding this to your embedded CSS:
<style>
* {-webkit-text-size-adjust: none}
</style>
Or you can control text on a case-by-case basis by adding the following inline CSS:
<font style="-webkit-text-size-adjust: none">
Example
</font>
5. Why is there padding only on the left side of my email?
Android 4.4 has a nasty habit of adding this. To fix it, just add the following CSS to your head section:
body { margin:0 !important; }
div[style*="margin: 16px 0"] { margin:0 !important; }
This fix was created by James White. Thank you James!
Revealing why emails appear off-centre in Android 4.4 (KitKat)
