Why does font-size CSS not work on iPad HTML emails?

Question

I'm working on an HTML email and have been running to a problem on the mail client on the iPad only.

It seems that setting inline CSS to "font-size: 12px" or any other size does not work on the mail app for iPad, despite the font-size displaying correctly in the Mail app for Mac OS X.

Any ideas?

score 17 · Accepted Answer · answered Aug 05 '10 at 08:41

17

Webkit automatically adjusts font-sizes on the ipad for easy reading. This CSS fixes the problem:

-webkit-text-size-adjust: none;

answered Aug 05 '10 at 08:41

531
1
4
11

1

on which level? body or html? – Ayyash Nov 16 '11 at 08:34
I tried setting this property on a td and it worked fine. I also tried it on a span and it worked fine. – Elias Zamaria May 16 '12 at 18:35
Excellent!!! I added this into the email body and it worked for all the font-size occurrencies in the code: – lucaferrario May 26 '12 at 21:51

Trenton Bost · Answer 2 · 2013-07-11T17:20:02.250

The WebKit layout engine automatically adjusts font-sizes.
As of this post, Webkit is commonly used in Safari, Chrome, Kindle and Palm Browsers.
Applications can also take advantage of WebKit.

The problem comes down to minimum 'font-size: 13px;'

A CSS work-around:
<style type="text/css"> div, p, a, li, td { -webkit-text-size-adjust:none; } </style>

One issue is when creating e-Mail Signatures, for tags may be over-written or stripped.
Please Note that inline WebKit Styling will be stripped out of Gmail's Web Client.

score 1 · Answer 3 · answered Aug 04 '10 at 07:32

1

Does it support composing styled text? (i.e., bold, italics, font sizes) No (confirmed), aside from any formatting carried over by copy-and-paste from Safari or other apps. (It definitely supports displaying HTML/rich text messages.)

http://www.macintouch.com/reviews/ipad/faq.html

answered Aug 04 '10 at 07:32

Michel

8,310
13
41
56

Just to clarify: this is in an html email, and I'm using lots of HTML and in-line CSS already that works. Font-styles DO work on the mail app for iPad. Bolding works, even text-transform works, but notably font-size is not working. – Pin Aug 05 '10 at 04:08

score 1 · Answer 4 · answered Jan 04 '12 at 13:02

<head>

<style type="text/css">
<!--

/*
    I began with the goal to prevent font scaling in Landscape orientation.
    To do this, see: http://stackoverflow.com/questions/2710764/

    Later, I just wanted to magnify font-size for the iPad, leaving
    the iPhone rendering to the css code.  So ...

    (max-device-width:480px) = iphone.css
    (min-device-width:481px) and
        (max-device-width:1024px) and
            (orientation:portrait) = ipad-portrait.css
    (min-device-width:481px) and
        (max-device-width:1024px) and
            (orientation:landscape) = ipad-landscape.css
    (min-device-width:1025px) = ipad-landscape.css

*/

@media only screen and (min-device-width: 481px)
{
    html {
        -webkit-text-size-adjust: 140%;
    }
}

-->
</style>

</head>

Why does font-size CSS not work on iPad HTML emails?

4 Answers4