Apple Devices

iPad and iPhone


Tips for coding email for iPad and iPhone devices, including iPad, iPhone, iPhone 5S, iPhone 6, iPhone 6+, iPhone 7 and iPhone 7+.


1 Why are my phone numbers converted to links?

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"


2 How do I prevent my fonts from being enlarged on this device?

To control the font adjustment in the iPhone universally, try adding this to your embedded CSS:

<style>
{-webkit-text-size-adjustnone}
</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


3 Why are the letters of my words breaking down to the next line?

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


4 How can I force the iPhone not to compress the view of my email?

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"

WARNING: This tag will cause your email to display as a blank white page in BlackBerry. More on that here.

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


5 Why am I seeing 1px line between my TDs?

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.


6 Why is my text wrapping funny?

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.


7 Why are my phone numbers converted to links?

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"


8 Can I write CSS that can only render on mobile devices?

Yes. You can use media queries in your embedded CSS:

@media only screen and (max-device-width480px{
/* 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-width768px{
/* 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.


9 I am seeing a 1px line through my email on the iPhone.

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.


10 Why do I see a button that says: Download remaining XX bytes?

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