Адаптивная верстка html-письма в gmail. Как?

Привет всем!

Тут озадачился версткой html-рассылки, которая глючно отображается в gmail. Там примерно такая штука:

@media screen and (max-device-width: 640px), screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5), screen and (max-width: 767px) and (-o-min-device-pixel-ratio: 3/2), screen and (max-width: 767px) and (min--moz-device-pixel-ratio: 1.5), screen and (max-width: 767px) and (min-device-pixel-ratio: 1.5) {
     .desktopversion { display: none !important; }
     .mobileversion { display: block !important; float: none !important; width: 100% !important; height: auto !important; }
}

@media screen and (min-width: 641px) and (-webkit-max-device-pixel-ratio: 1.0), screen and (min-width: 641px) and (-o-max-device-pixel-ratio: 1/1), screen and (min-width: 641px) and (max--moz-device-pixel-ratio: 1.0), screen and (min-width: 641px) and (max-device-pixel-ratio: 1.0), screen and (min-width: 768px) {
     .desktopversion { display: block !important; }
     .mobileversion { display: none !important; }
}


Ну и блоки:

<div class="desktopversion" style="display: block;">
///
</div>

<!--[if !mso]> -->
<div class="mobileversion" style="display: none; float: left; width: 0; overflow: hidden;">
///
</div>
<!-- <![endif] -->


Блоки дублируют информацию, но первый desktopversion показывается на больших экранах, а mobileversion - на малых.

И всё бы хорошо, но gmail не хочет отображать корректно. Да, он показывает только один из блоков (например desktopversion), но у mobileversion он показывает стили float: left; width: 0; overflow: hidden; из-за которых внизу письма отображается большое пустое поле цвета фона. Остальные почтовики рисуют блоки корректно. Можно ли каким-то хаком заставить это заработать в gmail?
  • Вопрос задан
  • 3398 просмотров
Пригласить эксперта
Ответы на вопрос 3
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Никак. Gmail (мобильный клиент) не поддерживает медиа-запросы.
Верстка резиновыми таблицами, где можно.
PS: Верстальщик писем, опыт 5 лет.
PPS: Имеется ввиду самое кроссплатформенное решение.
Ответ написан
dudeonthehorse
@dudeonthehorse
Email Developer
Забудьте о двух версиях письма. Делайте одну. Резиновыми таблицами. Приложение gmail медиазапросы не понимает. Ссылку на мой фреймворк уже дали выше. Там есть шаблона письма, который можно повертеть для понимания. Sergey Goryachev все верно говорит.
Ответ написан
Комментировать
ravshanium
@ravshanium
аналитик, веб-программист
возможно гмайл использует important, тогда как понимаете ваши настройки игнорируются.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы