Блог

Главная - Вопросы по программированию - Отзывчивое электронное письмо не работает в Outlook

Отзывчивое электронное письмо не работает в Outlook

#html #responsive-design #outlook #media-queries #html-email

#HTML #адаптивный дизайн #outlook #медиа-запросы #html-электронная почта

Вопрос:

У меня возникли некоторые проблемы с получением адаптивного шаблона электронной почты для правильного отображения в Outlook (desktop)… неожиданный сюрприз.

Я хочу, чтобы правый столбец располагался под левым столбцом при просмотре на мобильном устройстве (достигнуто). Тем не менее, при просмотре в Outlook она перемещает правый столбец на полпути и примерно на 50 пикселей вниз по странице.

Вот html и css для вас;

     @media only screen and (max-device-width: 480px) {

    table[class="container"] {
        width:300px !important;
    }

    td[class="header_body"] {
        text-align:center !important;
        padding-bottom:10px !important;
    }

    td[class="header_left_col"] {
        text-align:center !important;
        padding-bottom:10px !important;
    }   

    }

<!-- START OF HEADER-->

<table cellpadding="0" cellspacing="0" border="0" width="600" align="center" class="container" bgcolor="#ffffff"><tr><td>

<table cellpadding="0" cellspacing="0" border="0" width="300" align="left" class="header_left_col"><tr><td> ЛОГОТИП </td></tr></table>

<table cellpadding="0" cellspacing="0" border="0" width="300" class="header_right_col"><tr><td align="right"> Основное содержимое здесь </td></tr></table>

</td></tr></table>

Заранее спасибо.

Комментарии:

1. Короткий ответ: не используйте адаптивные методы для электронной почты, к сожалению, большинство почтовых клиентов это не поддерживают.

Ответ №1:

Поддержка CSS очень ограничена в Outlook и во многих других почтовых клиентах. Outlook вообще не поддерживает медиа-запросы, и многие другие клиенты их тоже не поддерживают.

Вот подробное руководство, включающее некоторые популярные клиенты:

Окончательное руководство по CSS

Ответ №2:

У меня было очень мало успехов с CSS, работающим вне встроенного замедления на рабочем столе. Apple mail и Gmail станут вашей целевой аудиторией для мобильных устройств, и они вполне поддерживают вас с точки зрения адаптивного дизайна. Более подробную информацию вы можете прочитать в Campaign monitor .

Ответ №3:

Короче говоря, CSS работает по-другому в почтовых клиентах. Многое из этого вообще не работает, и мы как будто вернулись к старому, используя табличные конструкции. У Mail Chimp есть хорошая ссылка на эту тему:

http://kb.mailchimp.com/article/how-to-code-html-emails/

Ответ №4:

Для отзывчивых электронных писем лучшим / наиболее распространенным методом является использование display:block; переключателя для ваших <td> элементов. Вот простой пример:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    @media only screen and (max-width: 600px) { .switch { width:100%; display:block; } }
  </style>
</head>
<body>

  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td class="switch" width="50%">
         <img alt="" src="http://placehold.it/150x150" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
      </td>
      <td class="switch" width="50%" valign="top" style="padding:30px;">
        Text here...
      </td>
    </tr>
  </table>

</body></html>