Why does font-size CSS not work on iPad HTML emails?_问答_开发者

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

开发者 https://www.devze.com 2023-01-10 07:50 出处：网络

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

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 i开发者_运维知识库deas?

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

-webkit-text-size-adjust: none;

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.

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

<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>