Блог

Главная - Вопросы по программированию - HTML-сообщение электронной почты не реагирует на Apple Mail

HTML-сообщение электронной почты не реагирует на Apple Mail

#html #css #email #media-queries #responsive

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

Вопрос:

Я создал шаблон электронной почты, который прекрасно работает практически во всех местах, кроме Apple Mail, и я не могу понять, почему.

Проблема заключается в разделе столбцов, которые должны складываться на мобильных устройствах. Я создал их, следуя этому руководству Mailchimp.

Вот раздел для столбцов:

 <table border="0" cellpadding="0" cellspacing="0" id="templateColumns" style="background-color: #ffffff;" width="600">
<tbody>
    <tr>
        <td align="center" class="templateColumnContainer" valign="top" width="50%">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tbody>
                    <tr>
                        <td class="leftColumnContent">
                        <img alt="Placeholder" class="columnImage" src="https://go.frazerconsultants.com/l/43262/2020-08-31/9klwjc/43262/253944/540x400_Placeholder.png" style="font-size: 17; font-family: 'Lato', Helvetica, Arial, sans-serif; line-height: 1.8em; max-width: 280px;" width="280">
                        </td>
                    </tr>
                    <tr>
                        <td class="leftColumnContent" style="color: #404040;" valign="top">
                        <h3 style="font-family: 'Lora', Georgia, serif;">Lorem Ipsum Dolor Sit Amet</h3>

                        <p>amp;nbsp;</p>

                        <p style="font-size: 17; font-family: 'Lato', Helvetica, Arial, sans-serif; line-height: 1.8em; margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

                        <p>amp;nbsp;</p>

                        <p><a href="https://frazerconsultants.com/" style="font-size: 17; line-height: 1.8em; font-weight: bold; font-family: 'Lato', Helvetica, Arial, sans-serif; color: #404040; margin: 0; text-decoration: underline;">Read More</a></p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
        <td align="center" class="templateColumnContainer" valign="top" width="50%">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tbody>
                    <tr>
                        <td class="rightColumnContent">
                        <img alt="Placeholder" class="columnImage" src="https://go.frazerconsultants.com/l/43262/2020-08-31/9klwjc/43262/253944/540x400_Placeholder.png" style="font-size: 17; font-family: 'Lato', Helvetica, Arial, sans-serif; line-height: 1.8em; max-width: 280px;" width="280">
                        </td>
                    </tr>
                    <tr>
                        <td class="rightColumnContent" style="color: #404040;" valign="top">
                        <h3 style="font-family: 'Lora', Georgia, serif;">Lorem Ipsum Dolor Sit Amet</h3>

                        <p>amp;nbsp;</p>

                        <p style="font-size: 17; font-family: 'Lato', Helvetica, Arial, sans-serif; line-height: 1.8em; margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

                        <p>amp;nbsp;</p>

                        <p><a href="https://frazerconsultants.com/" style="font-size: 17; line-height: 1.8em; font-weight: bold; font-family: 'Lato', Helvetica, Arial, sans-serif; color: #404040; margin: 0; text-decoration: underline;">Read More</a></p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</tbody>

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

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

#templateColumns{
  width: 100% !important;
}

.templateColumnContainer{
  display: block !important;
  width: 100% !important;
}

.columnImage{
  height: auto !important;
  width: 100% !important;
  max-width: 580px !important;
}

.leftColumnContent{
  font-size: 17px !important;
  line-height: 125% !important;
}

.rightColumnContent{
  font-size: 17px !important;
  line-height: 125% !important;
}

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

Он отлично работает в приложении Outlook: приложение Outlook на iOS / iPhone 11

Это не работает в приложении Apple Mail: приложение Apple Mail на iOS / iPhone 11

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

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

Отредактировано для добавления:

Я нашел какой-то ошибочный способ сделать его отзывчивым в приложении Outlook, ТОЛЬКО добавив [data-outlook-cycle] перед идентификаторами / классами в разделе медиа-запросов. По крайней мере, это делает его разборчивым как в Mail, так и в Outlook, но в идеале я бы хотел, чтобы электронное письмо также реагировало на Mail.

Ответ №1:

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

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
  <meta name="x-apple-disable-message-reformatting">
  <title></title>
  <style>
    @media only screen and (max-width:480px) {

      #templateColumns{
        width: 100% !important;
      }

      .templateColumnContainer{
        display: block !important;
        width: 100% !important;
      }

      .columnImage{
        height: auto !important;
        width: 100% !important;
        max-width: 580px !important;
      }

      .leftColumnContent{
        font-size: 17px !important;
        line-height: 125% !important;
      }

      .rightColumnContent{
        font-size: 17px !important;
        line-height: 125% !important;
      }
    }
  </style>
</head>
<body class="body">
  <table border="0" cellpadding="0" cellspacing="0" id="templateColumns" style="background-color: #ffffff;" width="600">
    <tbody>
        <tr>
            <td align="center" class="templateColumnContainer" valign="top" width="50%">
                <table border="0" cellpadding="10" cellspacing="0" width="100%">
                    <tbody>
                        <tr>
                            <td class="leftColumnContent">
                            <img alt="Placeholder" class="columnImage" src="https://go.frazerconsultants.com/l/43262/2020-08-31/9klwjc/43262/253944/540x400_Placeholder.png" style="font-size: 17; font-family: 'Lato', Helvetica, Arial, sans-serif; line-height: 1.8em; max-width: 280px;" width="280">
                            </td>
                        </tr>
                        <tr>
                            <td class="leftColumnContent" style="color: #404040;" valign="top">
                            <h3 style="font-family: 'Lora', Georgia, serif;">Lorem Ipsum Dolor Sit Amet</h3>
    
                            <p>amp;nbsp;</p>
    
                            <p style="font-size: 17; font-family: 'Lato', Helvetica, Arial, sans-serif; line-height: 1.8em; margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    
                            <p>amp;nbsp;</p>
    
                            <p><a href="https://frazerconsultants.com/" style="font-size: 17; line-height: 1.8em; font-weight: bold; font-family: 'Lato', Helvetica, Arial, sans-serif; color: #404040; margin: 0; text-decoration: underline;">Read More</a></p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td align="center" class="templateColumnContainer" valign="top" width="50%">
                <table border="0" cellpadding="10" cellspacing="0" width="100%">
                    <tbody>
                        <tr>
                            <td class="rightColumnContent">
                            <img alt="Placeholder" class="columnImage" src="https://go.frazerconsultants.com/l/43262/2020-08-31/9klwjc/43262/253944/540x400_Placeholder.png" style="font-size: 17; font-family: 'Lato', Helvetica, Arial, sans-serif; line-height: 1.8em; max-width: 280px;" width="280">
                            </td>
                        </tr>
                        <tr>
                            <td class="rightColumnContent" style="color: #404040;" valign="top">
                            <h3 style="font-family: 'Lora', Georgia, serif;">Lorem Ipsum Dolor Sit Amet</h3>
    
                            <p>amp;nbsp;</p>
    
                            <p style="font-size: 17; font-family: 'Lato', Helvetica, Arial, sans-serif; line-height: 1.8em; margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    
                            <p>amp;nbsp;</p>
    
                            <p><a href="https://frazerconsultants.com/" style="font-size: 17; line-height: 1.8em; font-weight: bold; font-family: 'Lato', Helvetica, Arial, sans-serif; color: #404040; margin: 0; text-decoration: underline;">Read More</a></p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
  </table>
</body>
</html>

Для меня это складывается в приложении Gmail (пока это адрес Gmail, для адресов, отличных от Gmail, не будут применяться медиа-запросы), а также в приложении Outlook и родном почтовом приложении iOS.

Может ли проблема быть где-то еще в вашем документе?

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

1. Спасибо, Николь! Из-за твоего комментария я сделал некоторые исключения в другом месте и обнаружил, что проблема заключается в объявление DOCTYPE: <!DOCTYPE PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» » w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd «> <html xmlns=» w3.org/1999/xhtml «> После обновления он начал прекрасно работать!