Приложение для автозагрузки gmail, дизайн электронной почты

Question

Я разрабатываю электронную почту, и у меня возникла проблема с функцией автоопределения приложения gmail в Android и iPhone.

Письмо успешно работает с другими клиентами.

Чтобы предотвратить авто, я пытался до сих пор:

• Установка макс ширины и мин-ширина на столе/обертку

• добавить мета окна просмотра, как это:

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
  

Ни один из них не работает.

У вас есть идея?

Answer 1

Я сейчас борюсь с этой проблемой, и то, что я планирую протестировать дальше, берет «Мобильный первый» подход к разработке электронных писем. Я собираюсь создавать электронные письма шириной 320-480 пикселей и использовать медиа-запросы, чтобы сделать более крупным для настольных клиентов вместо того, чтобы проектировать ширину 600 пикселей и уменьшать ее. Я надеюсь, что это заставит электронные письма отлично выглядеть в приложении GMail, где медиа-запросы не поддерживаются.

Я только слышал о двух ресурсов, которые кажутся довольно хорошо, проверьте:

lit.ms/KISSresources и www.responsiveemailresources.com

Answer 2

У меня была та же проблема. Я добавил min-width, а не только таблицу, но и тег column (td). Это, казалось, переписало функцию автоматической подгонки Gmail.

Ниже приведен пример того, как я реализую это. Я нашел ответ от этого форума: https://www.emailonacid.com/forum/viewthread/566/#827

<table width="590" height="900" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto; min-width:590px;"> 
    <tr> 
    <td style="font-size: 1px; line-height: 1%; mso-line-height-rule: exactly; min-width:295px;"> 
     <a href="#"> 
     <img style="display:block;border:0px;line-height:50%;" src="example.jpg" width="295" height="900" alt=""> 
     </a> 
    </td> 
    <td style="font-size: 1px; line-height: 1%; mso-line-height-rule: exactly; min-width:295px;"> 
     <a href="#"> 
     <img style="display:block;border:0px;line-height:50%;" src="example.jpg" width="295" height="900" alt=""> 
     </a> 
    </td> 
    </tr> 
</table> 

Как вы можете видеть, я накрыла стол к мин-ширина 590px; и каждый столбец (td) имеет минимальную ширину 295px. То же, что и размер изображения.