Something that everyone needs to know:

The media queries on Gmail for Android and Yahoo! Mail apps for Android are inconsistent with one another on the same device.

This is my sample test email I always use when testing @media queries on devices with unknown max widths.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="x-apple-disable-message-reformatting" />
    <custom name="opencounter" type="tracking" />
    <style>
        .logo {
            width: 650px;
        }

        @media only screen and (max-width:650px) {
            .test {
                background: #f00;
            }
            .logo {
                width: 650px;
            }
        }

        @media only screen and (max-width:550px) {
            .test {
                background: #ff0;
            }
            .logo {
                width: 550px;
            }
        }

        @media only screen and (max-width:450px) {
            .test {
                background: #aaa;
            }
            .logo {
                width: 450px;
            }
        }

        @media only screen and (max-width:420px) {
            .test {
                background: #f0f;
            }
            .logo {
                width: 420px;
            }
        }

        @media only screen and (max-width:360px) {
            .test {
                background: #0ff;
            }
            .logo {
                width: 360px;
            }
        }

        @media only screen and (max-width:320px) {
            .test {
                background: #0f0;
            }
            .logo {
                width: 320px;
            }
        }

        @media only screen and (max-width:300px) {
            .test {
                background: #777;
            }
            .logo {
                width: 300px;
            }
        }

        @media only screen and (max-width:220px) {
            .test {
                background: #000;
            }
            .logo {
                width: 220px;
            }
        }
    </style>
</head>

<body border="0" cellpadding="0" cellspacing="0" style="width:100%;text-align:center;margin:0;table-layout:fixed;‑webkit‑text‑size‑adjust:100%;display:table !important;">
    <style>
        .logo {
            width: 650px;
        }

        @media only screen and (max-width:650px) {
            .test {
                background: #f00;
            }
            .logo {
                width: 650px;
            }
        }

        @media only screen and (max-width:550px) {
            .test {
                background: #ff0;
            }
            .logo {
                width: 550px;
            }
        }

        @media only screen and (max-width:450px) {
            .test {
                background: #aaa;
            }
            .logo {
                width: 450px;
            }
        }

        @media only screen and (max-width:420px) {
            .test {
                background: #f0f;
            }
            .logo {
                width: 420px;
            }
        }

        @media only screen and (max-width:360px) {
            .test {
                background: #0ff;
            }
            .logo {
                width: 360px;
            }
        }

        @media only screen and (max-width:320px) {
            .test {
                background: #0f0;
            }
            .logo {
                width: 320px;
            }
        }

        @media only screen and (max-width:300px) {
            .test {
                background: #777;
            }
            .logo {
                width: 300px;
            }
        }

        @media only screen and (max-width:220px) {
            .test {
                background: #000;
            }
            .logo {
                width: 220px;
            }
        }
    </style>

    <img class="logo" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" style="width: 300px;" />
    <div class="test" width="650" height="650" style="width:650px;height:650px">Hello world.</div>


</body>

</html>

Based on the image from Google, and the color shown beneath it, I can then determine what the @media queries are and how it will affect our email designs.

I have a device on me with Gmail and Yahoo! Mail installed. When I opened this email in Gmail on this device, I get a yellow color, meaning for Gmail, the @media query for max-width is set to be in the range between 451px to 550px.

But on Yahoo! Mail, I get a gray color, meaning for Yahoo! Mail, the @media query for max-width is set to be in the range between 421px to 450px.

It's such a notable difference, I'm having a hard time figuring out how to handle this. I would expect @media query parameters for max-width to be different on different devices, but NOT on the same device.

Do you have any tips and tricks to share that would handle such inconsistencies?