HTML email tips and tricks for iPad and iPhone

Coding tips for the numerous problems in iPad and iPhone.

tip banner 1 uai

1. How to fix enlarged fonts in iPad and iPhone?

Try adding this to your embedded CSS to control font adjustment across all iPhones.

<style>
{-webkit-text-size-adjustnone}
</style

Alternatively, you can control text on a case-by-case basis by using the inline CSS:

<font style="-webkit-text-size-adjust: none">
Example
</font

2. How to fix hyperlinks for phone number and addresses in iPad and iPhone?

Safari on iOS identifies any text string written as a phone number by default and turns it to a link that allows users to call the number by just tapping it.

Simply add the following meta-tag to remove this type of auto formatting:

<meta name="format-detection" content="telephone=no"

3. How to fix compress view of email in iPad and iPhone?

Each element in your email is shrunk and scaled by the iPhone until the complete width of your design fits within its "viewport." Most of the time, this doesn't cause any visual issues, but HTML components aren't always resized in the same way.

In addition, Outlook.com's embedded CSS includes the following code:

A simple solution is to add an iOS-specific meta-tag.

<meta name="viewport" content="width=600,initial-scale = 2.3,user-scalable=no"

WARNING: If you use this tag, your BlackBerry will display your email as a blank white page. There's more on that here.

You may control the width of your email, the initial scale, and whether or not users can zoom in on the information with this element. The total width of your design in the example above will be at least 600 pixels, but the iPhone will still scale it to fit within its viewport. The default scale will be 2.3, and users will not be able to zoom.

If you're having issues with scaling on the iPhone, set the width to the widest element in your email and you should be fine.

4. How to fix words breaking down to the next line in iPad and iPhone?

On this device, if your text is in a container with a width that is smaller than the width of your text, it may wrap. To fix this, add the following to your contained element: word-wrap:normal

<td style="word-wrap:normal">text</td

5. How to fix text wrapping in iPad and iPhone?

Your email will be rescaled by the iPhone based on the width of the widest element in your layout. Assume you're working with stacked tables layered on top of each other. To fit it inside the viewport, it will take the broadest table and scale all of the others by the same ratio. To fix this, put your full email into its own table. This ensures that the aspect ratio of your entire email is maintained.

6. How to fix 1px line between TDs in iPad and iPhone?

If hairline borders occur in HTML email designs using table layouts, wrap the table in another table with the chosen backdrop colour. When a parent table's background colour differs from that of the child table, this problem occurs.

7. How to fix 1px line show in iPad and iPhone?

If hairline borders occur in HTML email designs using table layouts, wrap that table in another table with the required backdrop colour. This problem frequently happens when a parent table's background colour differs from that of a child table.

8. How to write CSS that will only render in iPad and iPhone?

Yes. In your embedded CSS, you can utilise media queries:

@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.maool.com/ 
                           
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
*/

9. How to fix Download remaining XX bytes? in iPad and iPhone?

The iOS reader sometimes only shows a small portion of the original email. When this occurs, the loaded piece is replaced with a button at the bottom that says, “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..

Try inserting multiple lines of empty spaces if you don't need any more styles or a style block.

This fix isn't compatible with iOS7 or later.