Android ignoring -webkit-text-size-adjust property

Hello,
Is anyone else experiencing this issue with the Android stock mail client? Android appears to be ignoring this css property and forcing a minimum font size of 14px. This is affecting Android 4.1 at least, I'm not sure if it's affecting later versions. Earlier versions are not affected.

Here's the test case:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
    -webkit-text-size-adjust: none !important;
}
</style>
</head>
<body style="-webkit-text-size-adjust: none !important;">
    <div style="font-family: Arial; font-size: 18px; -webkit-text-size-adjust: none !important;">Size 18 text</div>
    <div style="font-family: Arial; font-size: 16px; -webkit-text-size-adjust: none !important;">Size 16 text</div>
    <div style="font-family: Arial; font-size: 14px; -webkit-text-size-adjust: none !important;">Size 14 text</div>
    <div style="font-family: Arial; font-size: 12px; -webkit-text-size-adjust: none !important;">Size 12 text</div>
    <div style="font-family: Arial; font-size: 10px; -webkit-text-size-adjust: none !important;">Size 10 text</div>
    <div style="font-family: Arial; font-size: 8px; -webkit-text-size-adjust: none !important;">Size 8 text</div>
</body>
</html>

Naturally, I'd rather not be forced to use 14px font! Does anyone know if this limited to android 4.1, or if a workaround exists?

roshodgekiss roshodgekiss, 3 years ago

Hi there zerocents, I've anecdotally heard of the baseline font size in the Android default mail client overriding -webkit-text-size-adjust. I'm not sure if there's anything that can be done about this at present, I'm sorry to say, but I'd be keen to hear if other readers have had better luck here.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
zerocents zerocents, 3 years ago

**UPDATE**
Simplified fix below this post


After much experimenting, I'm pretty close to a solution.

The CSS:

/* Target webkit browsers/devices only */
@media screen and (-webkit-min-device-pixel-ratio: 0) {

    .email-content-wrapper {
        /* Zoom the page by 200% then shrink it back to 100% */
        zoom: 2; -webkit-transform-origin: 50% 0; -webkit-transform: scale(0.5,0.5);

        /* Re-center the page (left-aligned if omitted) */
        margin-left: -50%;
        margin-right: -50%;
    }
    .email-content {
        /* Resets the body height to fit scaled content (huge white space at bottom of email if omitted) */
        position: absolute;
        width: 100%;
    }

}

Then wrap your entire email in a couple of wrappers

<div class="email-content-wrapper">
    <div class="email-content">
    </div>
</div>

This essentially halves the minimum font size to 7px. It could be lowered further by using zoom: 4 and scale: 0.25, but I found this caused some graphical glitches.

**IMPORTANT**
For this fix to work, you MUST omit -webkit-text-size-adjust (oh the irony) or fonts will appear 50% of their normal size on iOS devices.

This appears to work on chrome, safari, android 2.3/4.0+ and iOS 5.0+. YMMV.

**ISSUES**
There are some weird text-wrapping issues on Android with long blocks of text, but hopefully this can be fixed.

I'll be testing this more thoroughly soon, hope somebody finds this useful, there's almost no discussion of this issue on the web.


Michael Muscat
roshodgekiss roshodgekiss, 3 years ago

WOW! Nicely done - thank you so much for sharing! We've had this question asked a few times, so we'll be sure to point folks here in the future. Love your work :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
zerocents zerocents, 3 years ago

Now even simpler and without wrappers.

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    body {
        zoom: 2;
        -webkit-transform-origin: 0 0;
        -webkit-transform: scale(0.5,0.5);
        position: absolute;
        width: 200%;
    }
}

Setting the initial scale to 0.5 on the viewport metatag appears to keep android 2.3 happy, at least, according to litmus. I don't have any Android 2.3 devices to verify this. The text wrapping issue appears to be related to the zoom level.

<meta name="viewport" content="width=device-width, initial-scale=0.5" />

Michael Muscat
roshodgekiss roshodgekiss, 3 years ago

Bingo - I love seeing a good thing get better!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Redferret, 3 years ago

Does this become a usability issue though? i mean, i generally go for 14-16px font size on mobiles but less than that seems like it could be hard to read


Gmail app apologist
zerocents zerocents, 3 years ago

On mobile devices with screen sizes less than 5" I would tend to agree, but on larger tablets it makes less sense to be constrained by such font sizes. Even then, there are some circumstances where small text is unavoidable, such as fineprint, subscripts, etc, particularly when it's constrained by a containing box that would break if the font were made larger.


Michael Muscat

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098