EoA Mobile TIP
Tips for coding email for iPad and iPhone devices, including iPad, iPhone, iPhone 5S, iPhone 6, iPhone 6+, iPhone 7 and iPhone 7+.
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:
* {-webkit-text-size-adjust: none}
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.
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">
Yes. You can use media queries in your embedded CSS:
@media only screen and (max-device-width: 480px) {
/* Here you can include rules for the Android and
iPhone native email clients. ALWAYS USE IDs!!! The
Android does not support "class" declarations.
Here's more info on that: https://www.emailonacid.com/blog/the_android_mail_app_and_css_class_declarations/
Device viewport dimensions are as follows:
Iphone: 320px X 480px - portrait, 480px X 320px - landscape
Android:350px X 480px - portrait, 480 X 350 - landscape
(These are average dimensions, the Android OS runs on several different devices)
*/
}
@media only screen and (min-device-width: 768px) {
/* Here you can include rules for the iPad native
email client.
Device viewport dimensions in pixels:
768 x 1024 - portrait, 1024 x 768 - landscape
*/
}
Media queries will not work for mobile versions of Gmail.
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.
Sometimes the iOS reader only displays a small segment of the original email. When this happens, it renders the loaded portion with a button at the bottom which reads: “Download remaining XX bytes.”
To fix this in iOS 6 or lower, make sure that you have a minimum of 1,019 characters before your closing head tag (
) including spaces and carriage returns.
If you don’t have any need for more styles or a style block, try inserting several lines of empty spaces.
This fix doesn’t work for iOS7 or newer.
Here is a complete article with samples: Two ways to ensure that your entire email is rendered by default in the iPhone & iPad
