Android Systems

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-width480px{
/* Here you can include rules for the Android and 
iPhone native email clients. 
*/
}

@media only screen and (min-device-width768px{
/* 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="http://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-adjustnone}
</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:!important}
div
[style*="margin: 16px 0"{ margin:!important

This fix was created by James White. Thank you James!

Revealing why emails appear off-centre in Android 4.4 (KitKat)