移动端邮件内容隐藏在Gmail中失效的技术求助

你用媒体查询在移动端隐藏时，Outlook移动端能生效，但Gmail移动端没反应；后来尝试给加行内display:none，再通过桌面媒体查询恢复，结果桌面端内容也没回来。下面是针对这两个问题的解决办法：

一、解决Gmail移动端无法隐藏的问题 #

Gmail移动端对<head>里的媒体查询支持有限，单独用类选择器隐藏容易被忽略，需要同时针对和内部设置样式，还要兼容Outlook：

<!doctype html>
<html>
<head>
    <title>Denizbank</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
    @media only screen and (max-width: 600px) {
        /* 同时隐藏行和单元格，避免Gmail解析残留 */
        tr.hide-on-mobile,
        tr.hide-on-mobile td {
            display: none !important;
            mso-hide: all !important; /* 强化Outlook移动端兼容 */
        }
    }
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="width: 100%;">

    <table width="789" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="white">
        <tr>
            <td style="line-height: 1px; font-size: 1px" colspan="3">
                    <img style="display:block; border:0;" src="https://www.denizbank.com/mailing/avukat_ust_240323_01.jpg" width="789" height="108" alt=""></td>
        </tr>

        <tr class="hide-on-mobile">
            <td  style="line-height: 1px; font-size: 1px">
                    <img style="display:block; border:0;" src="https://www.denizbank.com/mailing/afili_meslek_avukat_mailing_280223_02.jpg" width="46" height="301" alt=""></td>
            <td  width="701" height="301" bgcolor="#364F64" align="center" >
                <p style="margin: 0 !important; padding: 0px 50px 15px 50px;  display: inline-block !important;   font-family: Helvetica, Arial, sans-serif; font-size: 35px !important; line-height: 130% !important; color: #ffffff; font-weight: bold !important;">
                  Nakit İhtiyaçlarınız için Hızlı Çözüm Afili Bankacılık’ta!
                </p>
            </td>
            <td  style="line-height: 1px; font-size: 1px">
                    <img style="display:block; border:0;" src="https://www.denizbank.com/mailing/afili_meslek_avukat_mailing_280223_04.jpg" width="42" height="301" alt=""></td>
        </tr>
</body>
</html>

二、解决行内display:none无法在桌面端恢复的问题 #

行内样式优先级极高，仅恢复的显示不够，还要显式还原内部的默认样式：

<!doctype html>
<html>
<head>
    <title>Denizbank</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
    @media only screen and (min-width: 601px) {
        /* 同时还原行和单元格的显示 */
        tr.hide-on-mobile[style*="display: none;"] {
            display: table-row !important;
        }
        tr.hide-on-mobile[style*="display: none;"] td {
            display: table-cell !important;
        }
    }
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="width: 100%;">

    <table width="789" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="white">
        <tr>
            <td style="line-height: 1px; font-size: 1px" colspan="3">
                    <img style="display:block; border:0;" src="https://www.denizbank.com/mailing/avukat_ust_240323_01.jpg" width="789" height="108" alt=""></td>
        </tr>

        <tr class="hide-on-mobile" style="display: none;">
            <td  style="line-height: 1px; font-size: 1px">
                    <img style="display:block; border:0;" src="https://www.denizbank.com/mailing/afili_meslek_avukat_mailing_280223_02.jpg" width="46" height="301" alt=""></td>
            <td  width="701" height="301" bgcolor="#364F64" align="center" >
                <p style="margin: 0 !important; padding: 0px 50px 15px 50px;  display: inline-block !important;   font-family: Helvetica, Arial, sans-serif; font-size: 35px !important; line-height: 130% !important; color: #ffffff; font-weight: bold !important;">
                  Nakit İhtiyaçlarınız için Hızlı Çözüm Afili Bankacılık’ta!
                </p>
            </td>
            <td  style="line-height: 1px; font-size: 1px">
                    <img style="display:block; border:0;" src="https://www.denizbank.com/mailing/afili_meslek_avukat_mailing_280223_04.jpg" width="42" height="301" alt=""></td>
        </tr>
</body>
</html>

关键注意事项 #

• Gmail移动端不支持复杂嵌套选择器，尽量用直接的元素+类选择器
• 邮件客户端CSS差异极大，测试时要覆盖Gmail、Outlook、Apple Mail等主流平台
• !important是必须的，很多客户端会强制应用默认或行内样式

内容的提问来源于stack exchange，提问作者Utku Yıldız