Email Dev: Как показать тд / изображение только в мобильных клиентах?

Question

Я хочу отобразить изображение / (или тд) только тогда, когда электронная почта открыта в мобильном браузере.Это то, что я реализовал до сих пор, и это не работает в 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?

Answer 1

Это действует для любого почтового клиента, который использует @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 для IOS (другие вопросы).

Удачи.

Answer 2

Это может быть потому, что вы опубликовали класс .displaymobile, но элемент img имеет класс .resetimage