Изменить изображение заголовка новостной рассылки на мобильном устройстве

Question

Я сделал информационный бюллетень с фреймворком mjml. Я должен изменить изображение заголовка на мобильных устройствах, но как? Фреймворк очень полезен для создания пуленепробиваемых новостных рассылок, но не поддерживает разные изображения для разных видов.

Это код заголовка:

              <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="900" align="center" style="width:900px;">
                <tr>
                  <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
              <![endif]-->
    <div style="margin:0px auto;max-width:900px;background:#29c5f8;">
      <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#29c5f8;" align="center" border="0">
        <tbody>
          <tr>
            <td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:0px;padding-top:0px;">
              <!--[if mso | IE]>
              <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:900px;">
              <![endif]-->
              <div class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
                <table role="presentation" cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
                  <tbody>
                    <tr>
                      <td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;" align="center">
                        <table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0">
                          <tbody>
                            <tr>
                              <td style="width:900px;">
                                <a href="http://www.link.com" target="_blank">
                                  <img alt="" title="" height="auto" src="http://www.link.com/img/img-desktop.png" style="border:none;border-radius:;display:block;outline:none;text-decoration:none;width:100%;height:auto;" width="900">
                                </a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]>
              </td></tr></table>
              <![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]>
              </td></tr></table>
              <![endif]-->
    <!--[if mso | IE]>

 

Спасибо за вашу поддержку

Answer 1

Документация MJML позволяет изменять изображение на основе области просмотра для mj-изображений с использованием атрибута srcset.

srcset url & width позволяет установить другой источник изображения на основе области просмотра

Однако в моих тестах я не смог заставить их работать.

Я бы предложил использовать медиа-запросы и класс CSS.

Answer 2

Я бы сказал, что здесь есть три варианта:

1. Имейте эти два изображения в своем HTML и отображайте только правильное изображение в зависимости от используемого устройства, используя медиа-запросы (особенно полагаясь на display свойство, плюс условные комментарии для Outlook)
2. Оберните ваш настольный тег изображения img в span, На мобильном устройстве вы будете использовать медиазапросы, чтобы скрыть это изображение на рабочем столе и добавить фоновое изображение в span пометить с background-url свойство, которое "заменит" изображение рабочего стола, которое вы скрываете
3. Имейте в своем HTML только один тег изображения, указывающий на изображение, размещенное на сервере, и отправляйте обратно правильное изображение в зависимости от устройства, на котором открывается электронная почта (с помощью User-Agent)

К сожалению, у всех них есть недостатки:

1. Хотя отображение мобильного контента только на мобильных устройствах вполне возможно, скрыть контент гораздо сложнее и может не сработать, так что вы можете получить оба отображаемых изображения. Кроме того, медиа-запросы не поддерживаются повсеместно.
2. Фоновые изображения поддерживаются не всеми почтовыми клиентами, поэтому они не будут работать везде. Опять же, медиа-запросы не поддерживаются везде.
3. Вам нужно работать над сценарием. Тем не менее, это не должно быть слишком сложно, используя пакет, такой как https://www.npmjs.com/package/ua-parser

С точки зрения совместимости третий вариант определенно является лучшим. Это вариант для вас?