电子邮件开发：如何仅在移动客户端中显示 td/image？答案

【问题标题】：Email Dev: How to show td/image only in mobile clients?电子邮件开发：如何仅在移动客户端中显示 td/image？
【发布时间】：2018-11-23 04:37:48
【问题描述】：

我希望仅当电子邮件在移动浏览器中打开时才显示图像/（或 td）。这是我迄今为止实现的，它在 Gmail 中不起作用：

.resetimage {
          display: block !important;
  max-height: inherit !important; 
   width: auto !important; 
      }

<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
       <td style="padding:0px 0px 30px 0px;" width="100%">
        <img class="resetimage" data-assetid="34095" height="132" src="imageurl.jpg" style="display:none; max-height:0; width:0;">
        </td>
        </tr>
        </table>

Gmail 不能只在移动设备上呈现吗？

【问题讨论】：

这是静态 HTML。您是否对为什么它不起作用感到困惑，或者要求人们为您完成您的工作？假设是前者，因为后者不会引起太多关注，你的样式应该如何出现在 HTML 中？
我想知道为什么它不起作用，特别是在 Gmail 中。通过 class="resetimage" 在 HTML 中调用样式

标签： email html-email

【解决方案1】：

可能是因为您发布的类是 .displaymobile，但 img 元素的类是 .resetimage

【讨论】：

对不起，我重命名了堆栈中的类以使其更有意义，但最初它是 .resetimage。不在我的 gmail 中呈现。

【解决方案2】：

这对使用@media 查询的任何电子邮件客户端都有效：

<style>
.showmobile {
  display: none !important;
}
    @media screen and (max-width: 600px) {
    .showmobile {
        display: block !important;
        width: auto !important;
        overflow: visible !important;
        float: none !important;
        max-height: inherit !important;
        line-height: inherit !important;        
    }
}
</style>

在体内：

<table class="showmobile" style="display: none; mso-hide: all;">
  <tr>
    <td align="center" class="showmobile" style="display: none; mso-hide: all;">
    Hello mobile
    </td>
  </tr>
</table>

这有助于在 Outlook 中隐藏仅限移动设备的内容。

这不适用于 Android 6 电子邮件、Android 4.4、Outlook for IOS（其他问题）。

祝你好运。

【讨论】：