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

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

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

Спасибо!

Ответ 1

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

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

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

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

Ответ 2

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

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

Трюк заключается в том, чтобы добавить

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

в самую широкую часть сообщения электронной почты

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