it-swarm.com.ru

Отзывчивые электронные письма в приложении Gmail (Android)

Я создал адаптивный шаблон электронной почты, который работает во всех веб-клиентах, во всех версиях Outlook, Apple mail, Thunderbird, iOS, приложении HTC "Mail" и почти во всем остальном, кроме Lotus Notes.

Не работает для приложения Gmail на Android. Я почти уверен, что это потому, что gmail удаляет все css в заголовке (который содержит медиа-запрос), чтобы он показывал стандартную веб-версию, но окно имеет размер мобильного устройства, поэтому оно показывает около 300px половины электронной почты. Есть ли способ заставить его использовать медиа-запрос? В противном случае, есть ли способ изменить видовой экран? Что будет лучшим вариантом отступления?

Спасибо!

14
user1370288

Обходных путей при использовании медиа-запросов не существует, так как они не могут быть встроены. К сожалению, для Gmail не существует решения, касающегося адаптивной электронной почты (при условии, что Responive = медиа-запросы).

Вот альтернативы:

  1. Жидкий макет - макет, основанный на процентах - как правило, один столбец электронной почты, который составляет 100%. Вы можете добавить обходные пути максимальной ширины, чтобы ограничить ее ширину на рабочих столах. Это на 100% поддерживается во всех основных клиентах и, на мой взгляд, является лучшей техникой для электронной почты в формате HTML.
  2. Выровненные таблицы - это более "адаптивный", чем адаптивный. Работает так же, как плавающие div. Атрибут HTML align="left" в таблице работает более согласованно в основных почтовых клиентах, так как float имеет ограниченную поддержку.
  3. Держитесь левой стороны - просто создайте дизайн своей электронной почты, чтобы все важные элементы были слева. Устройства всегда будут показывать самые левые примерно 300 пикселей, поэтому может быть уместен разделенный столбец, текст слева, расположение изображения справа.

Вы можете найти несколько примеров жидкости и float/align здесь .

22
John

Вы можете использовать метод, показанный здесь, чтобы заставить электронную почту оставаться на ширине рабочего стола в приложении Gmail. Это не блестящее решение, поскольку все будет довольно маленьким, и оно определенно не отвечает (как раз наоборот).

Но по крайней мере это остановит ваши макеты от взлома.

Хитрость в том, чтобы добавить

<div style="display: none; white-space: nowrap; line-height: 0; color: #ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>

к самой широкой части письма

https://css-tricks.com/override-gmail-mobile-optimized-email/

0
Eoin