EoA Mobile TIP
Coding tips for the numerous iOS email clients, including iOS, iOS X, iOS 5S, iOS 7, iOs 7+, iOS 8, and iOS 8+.
By default, Safari on the iOS detects any text string that is formatted like a phone number and converts it to a link which allows users to call the number by simply touching it.
To remove this type of auto formatting simply add the following meta-tag:
<meta name="format-detection" content="telephone=no">
To control the font adjustment in the iPhone universally, try adding this to your embedded CSS:
<style>
* {-webkit-text-size-adjust: none}
</style>
Or you can also control text on a case by case basis by adding the following inline CSS:
<font style="-webkit-text-size-adjust: none">
Example
</font>
If your text is in a container with a width set to less than that of your text, it might wrap on this device. To fix this add word-wrap:normal to your containing element:
<td style="word-wrap:normal">text</td>
The iPhone shrinks and scales each of the elements within your email until the entire width of your design fits within its “viewport”. Most of the time this does not cause any visual problems, however sometimes HTML elements are not scaled at the same ratio.
There is a very simple fix – add an iOS specific meta-tag.
<meta name="viewport" content="width=600,initial-scale = 2.3,user-scalable=no">
With this tag you can set the width of your email, the initial scale and whether you want users to be able to zoom in on the content. In the example above the total width of your design will be no less than 600 pixels but the iPhone will still scale it to fit within its viewport. The initial scale will be 2.3 and users cannot zoom.
If you notice any scaling problems on the iPhone set the width to the widest element in your email and you should be good to go.
For more information on the uses of this meta-tag visit the following link
If you run into an issue with hairline borders appearing in HTML email designs with table layouts, make sure to wrap that table in another table with the desired background color. This problem usually occurs when a parent table has a different background color from a child table.
The iPhone tries to rescale your email according to the widest element in your layout. So let’s assume you are using stacked tables, one on top of the other. It will take the widest table and scale all the others by the same ratio in order to fit it inside the viewport. To correct this, try wrapping your entire email in a table of its own. This will ensure that your entire email is scaled at the same aspect ratio.
Learn more about this from our blog post.
