2014-03-06 1 views
0

Я заканчиваю шаблон Mailchimp, и Gmail сейчас самая большая головная боль.Gmail собирает части стилей медиа-запросов (Mailchimp)

В голове у меня есть некоторые стили (css) и медиа-запросы. Если я поставлю медиа-запросы внизу, это перестает проходить большинство стилей. Если я поставил медиа-запросы наверху - все мои стили работают отлично, но почта выглядит «разбитой» (например, она должна быть шириной 600 пикселей/мобильнее), как уже загружены медиа-запросы.

Во-первых, я не сделал подумайте, что Gmail должен читать что-либо внутри медиа-запроса, а во-вторых, почему моя почта показана «отзывчиво», когда у меня полная ширина браузера?

---- на стороне примечания ---- Я знаю, что я могу пройти через все и добавить встроенные стили, но у меня есть три шаблона, и я бы предпочел, если я смогу с ним справиться :)

+0

См http://stackoverflow.com/a/11697326/595525 – philipvr

+0

Gmail удаляет все вне тела тега, который включает в себя теги стилей. Возможно, это необычное поведение связано с тем, что у вас есть медиа-запрос где-то в теле? То, что вы описываете, звучит странно - вам нужно будет опубликовать код и скриншоты, если вы хотите, чтобы кто-то помог решить эту ситуацию. На боковой ноте вы можете работать в теге стиля, просто запускайте его через один из этих инструментов [inlining] (http://stackoverflow.com/questions/791070/what-tools-to-automatically-inline-css-style -to-create-email-html-код/​​17882057 # 17882057) перед отправкой. – John

+0

Да. это странно. Однако CSS, который вы пишете в mailchimp, отображается как встроенный, когда вы отправляете свои кампании. Так что, я думаю, проблема там?Кто-нибудь знаком с тем, как Mailchimp работает с стилями css в голове? –

ответ

1

Я узнал через обширное google-ing, что я не единственный в мире, у которого была эта (странная) проблема. Я цитирую Лукаса Майнарди ниже, который отправил ответ на аналогичную проблему для Outlook.com.

В принципе, добавление дополнительного тега стиля с вашими мультимедийными запросами непосредственно перед закрытием тега тега будет исправлять ситуацию.

Я тестировал на своих устройствах (gmail, iphone, thunderbird), и это, похоже, не наносит ущерба клиентам, у которых раньше не было проблем. Я также ожидаю завершения проверки входящих сообщений Mailchimp (где я тестирую больше клиентов, таких как Outlook, Android и т. Д.). Я отредактирую свой ответ, если он навредит, иначе рассмотрите это решение.

Здравствуйте Джеймс,

В комментариях ниже я разместил возможное решение этой проблемы в Outlook.com.

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

Решение, которое я нашел, состоит в том, чтобы поместить раздел стиля, содержащий медиа-запросы, после электронной почты HTML, особенно прямо над тегом закрывающего тела.

Я пробовал это в Litmus, и все, казалось, работали очень хорошо по всем направлениям (никакие другие браузеры/мобильные устройства/серверы электронной почты, похоже, не пострадали негативно, отображая ту же самую версию электронной почты со стилями в головная часть).

Взятые из http://emailwizardry.nightjar.com.au/2013/08/28/media-queries-in-html-email-cover-all-your-bases/

Смежные вопросы