Верстка писем. В чем нюанс?

Question

[Zio1903]

Столкнулся с такой ситуацией.
Делали верстку писем. Вроде все ок, в gmail приходит первое сообщение, все нормально.

Затем приходит второе и все начинает ехать, ощущение буд-то стили не применяются в принципе.

Смущает тот факт, что первичное письмо оформлено корректно, а в последующих творится хаос.
Снимки сделаны в gmail, официальное приложение под iOS.
Кто сталкивался?

Comments

[Арман Дендибаев]

на mailru yandexru тоже так или по другому ?

Answer 1

[Роман Дворянов]

Это старая известная фишка gmail, он адаптирует письма по своей никому неизвестной логике.
Есть два способа решить этот момент: костыльный и геморройный
1. Костыльный -
В конце письма делаем невидимый блок на всю ширину письма (700пкс)

<div align="center" style="display:none;text-align:center;white-space:nowrap;font:15px courier;color:#f3f3f5">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</div>

2. Геморройный -
Необходимо ко всем элементам, который gmail адаптирует (в основном блоки с текстом) прописать размер шрифта в !important и переносы убрать - white-space: nowrap;
Буржуины предлагают еще способ использовать прозрачную картинку -

<style>
@media only screen and (max-width: 600px) {
  *[class="gmail-fix"] {
    display: none !important;
  }
}
</style>
<tr class="gmail-fix">
    <td>
      <table cellpadding="0" cellspacing="0" border="0" align="center" width="600">
        <tr>
          <td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 600px;">
            <img src="spacer.gif" width="600" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 600px; width: 600px;"/>
            </td>
          </tr>
      </table>
    </td>
  </tr>

Последний не проверял, но есть у меня мнение, что gmail выпиливает css код в тегах < style >

Comments

[Eugene]

Костыль с div действительно работает. А вот просто обертка всего письма с несколькло таблиц с фиксированной шириной - в одном случае сработала, в другом почему-то нет.

Answer 2

[Артур Кох]

Есть и бескостыльный вариант. Основной оберткой письма должна быть фиксированная таблица. Каждая "строка" этой таблицы должна быть выполнена дочерней TD, а не независимым элементом. В таком случае Gmail просто не сможет скукожить тот или иной элемент.

Answer 3

[Дмитрий]

Вам же пишут , что письмо под ваш экран сделано. Если нажать "оригинал", то будет порядок? Если так, то что вы используете? Таблицы решают вопрос на 100%, под любые экраны

Comments

[Zio1903]

1. Нет, ничего не изменится. 2. Подробнее о таблицах?

Answer 4

[Юрий Кисильчук]

https://habrahabr.ru/company/pechkin/blog/273677/ Советую ознакомиться.