HTML email tips and tricks for iOS

1. How to fix enlarged fonts on iOS?

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

Or you can also control text on a case by case basis by adding the following inline CSS:

2. How to fix words breaking down to the next line on iOS?

It's possible that your text will wrap on this device if it's in a container with a width that's less than the width of your text. Add word-wrap:normal to your contained element to fix this:

3. How to fix compress view of email on iOS?

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.

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 phone numbers being converted to links on iOS?

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:

5. How to fix text wrapping on iOS?

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 on iOS?

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.