Question

Current configuration of hardware: iPhone 6s, iOS 10.0.1 (I have a software update pending for iOS 10.0.2)

I have the following html test code (p.s. I've also tested with iPhone 6s specific queries like specified in this answer)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        @media (max-width: 600px) { h1.query1 { color: red !important; } }

        @media (max-width: 700px) { h1.query2 { color: purple !important; } }

        @media (min-width: 300px) { h1.query3 { color: blue !important; } }

        @media (min-width: 320px) { h1.query4 { color: white !important; } }

        @media (max-device-width: 1125px) { h1.query5 { color: yellow !important; } }

        @media (max-device-width: 1242px) { h1.query6 { color: violet !important; } }
    </style>
</head>

<body style="margin: 0 0 0 0; padding:0; min-width: 100%; width: 100%; offset: 0; clear: both;">
    <div style=" margin: 0; min-width: 100%; padding: 0; width: 100%;">
        <h1 class="query1" style="color: green;">MEDIA TEST</h1>
        <h1 class="query2" style="color: green;">MEDIA TEST</h1>
        <h1 class="query3" style="color: green;">MEDIA TEST</h1>
        <h1 class="query4" style="color: green;">MEDIA TEST</h1>
        <h1 class="query5" style="color: green;">MEDIA TEST</h1>
        <h1 class="query6" style="color: green;">MEDIA TEST</h1>
    </div>
</body>

</html>

Live version is here: http://codepen.io/anon/pen/gwkbEK

When I send it to my account in Gmaill app on Android phone I get the following result (all lines are colored):

But when I open same mail in native iOS 10 mail application in iPhone 6, I get this result (all labels are green):

Am I doing something wrong, or iOS 10 mail client stopped supporting media queries?

Answer 1

Important to note: these screenshots are of Gmail app on iOS, not iOS Mail app. Until a few weeks ago, no mobile Gmail client anywhere supported media queries. Gmail recently started rolling out media query support based on platform, geo-location, and product. Results will vary across Google Mail products until the rollout is complete.

As of October 2016, U.S.-based Gmail accounts are starting to see media query support whereas U.K.-based accounts are not. Litmus Previews use UK Gmail accounts, so we won't see the update appear in Litmus regardless of where we're testing from.

Gmail is also rolling out based on Gmail product, so depending on what TYPE of Gmail product you're checking and the platform, results could vary. Here is a quick breakdown of where the rollout stands now:

More info and updated charts on Litmus

Media queries aren't picked up by iOS 10 mail client

1 个答案:

Media queries aren&#39;t picked up by iOS 10 mail client

1 个答案:

Media queries aren't picked up by iOS 10 mail client