HTML Newsletter показывает различные <td>в мобильных и настольных ПК - PullRequest
1 голос
/ 09 марта 2019

Я пишу рассылку по электронной почте.

Я хочу показать <td> с высотой 400px на рабочем столе, но затем уменьшить на мобильном телефоне, чтобы сказать 200px.

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

Кто-нибудь сможет предложить помощь, как лучше всего это сделать. Я думал о том, чтобы иметь мобильное шоу / мобильную шкуру на двух отдельных <td> с одним и тем же контентом, но с разной высотой, заданной для встроенного стиля.

Есть ли способ сделать это полностью встроенным без необходимости стиля в заголовке / медиазапросах.

Ответы [ 2 ]

0 голосов
/ 10 марта 2019

Самое простое решение - использовать медиазапросы, потому что в них нет магии - JavaScript недоступен для использования.

В качестве альтернативы вы можете создать A / B-тест для двух версий вашего информационного бюллетеня (Desktop и Mobile) со ссылкой на альтернативную онлайн-версию (Desktop -> Mobile / Mobile -> Desktop). Используйте аналитику, чтобы определить, является ли формат фактором, и вы также можете определить, какая платформа наиболее широко используется и т. Д. Как говорится, мир - это ваша устрица, но это кажется излишним - сохраняйте простоту и просто используйте медиазапросы.

В Интернете есть несколько ресурсов, которые помогут вам с медиа-запросами:

https://templates.mailchimp.com/resources/email-client-css-support/

https://cm.engineering/fixing-bugs-with-outlook-specific-css-f4b8ae5be4f4

0 голосов
/ 10 марта 2019

Медиа-запросы, несмотря на ваше нежелание использовать их, являются вашим лучшим вариантом.

Единственные другие инструменты, которые могут динамически настраиваться в зависимости от высоты чего-либо:

  • Процентдлины ... которые не позволяют выбирать между двумя фиксированными высотами и которые зависят от контейнера, не имеющего height: auto
  • JavaScript ... который не будет выполняться ни одним почтовым клиентом.
...