Блог

Главная - Вопросы по программированию - Адаптивная электронная почта — скрыть изображение в приложении gmail (iOS)

Адаптивная электронная почта — скрыть изображение в приложении gmail (iOS)

#html #css #email #responsive-design #html-email

#HTML #css #Адрес электронной почты #адаптивный дизайн #html-электронная почта

Вопрос:

Можно ли скрыть изображение при использовании мобильного приложения для Gmail? Я использую свое мобильное приложение на iOS и пробовал 2 часа, но безуспешно.

 <style type="text/css">

     
@media only screen and (max-width:600px) {
            
    table.hide { display: none !important }
          
        
}

</style>

<table class="hide" align="right" width="324" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td align="left" style="padding: 40px 40px 0px 110px;"><img src="#" width="172" height="42" border="0" alt="Release"></td>
    </tr>
  </tbody>
</table>

Комментарии:

1. Вы пытаетесь скрыть только в Gmail iOS или для всех Gmail, или что?

2. Я хочу, чтобы оно скрывалось на всех мобильных устройствах, но я не могу заставить его работать в gmail. Остальное выглядит нормально в лакмусе.

3. Убедитесь, что у вас есть проприетарность <html> <head> и <body> структура. Gmail поддерживает только <style> элементы в <head> .

Ответ №1:

Ваш код работает для меня, за исключением того, что существуют разные версии Gmail, а Gmail IMAP / POP — это тот, который ВООБЩЕ НЕ поддерживает классы / встроенные CSS (он полностью удален). То же самое можно сказать и о собственной электронной почте Android.

Возможно, как отметил @HTeuMeuLeu, необходима нормальная структура.

Это то, что я использовал:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title></title>
  <style type="text/css">
    @media only screen and (max-width:600px) {  
      table.hide { display: none !important }
    }
  </style>
  </head>
<body>
<table class="hide" align="right" width="324" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td align="left" style="padding: 0;"><img src="https://via.placeholder.com/172x42" width="172" height="42" border="0" alt="Release"></td>
    </tr>
      <tr>
      <td align="left" style="padding: 0;">This is a test</td>
    </tr>
  </tbody>
</table>    
</body>
</html>
Метки: