Почему родной почтовый клиент Apple обрезает (не показывает) конец HTML? - PullRequest
Новая
       26

Почему родной почтовый клиент Apple обрезает (не показывает) конец HTML?

0 голосов
/ 17 мая 2019

Я создаю новостную рассылку по электронной почте и тестирую ее с различными (нативными и веб) почтовыми клиентами.До сих пор почтовый клиент iOS Gmail, Outlook.com (собственный) показывает сообщение электронной почты, как и ожидалось.Только собственный почтовый клиент MacOS отсекает конец письма, но HTML-код все еще там (при открытии исходного кода в Apple Mail).Кто-нибудь знает, как это предотвратить?

До сих пор я пытался добавить пустые элементы div, разрывы строк (
) и изображение.Последний вариант показал ожидаемый текст, но обрезал изображение. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head><meta name="viewport" content="width=device-width,initial-scale=1" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Unread News | Issue #1 14.05.2019</title>
    <style type="text/css">* {
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }

    a {
        color: #2ba9e0;
        text-decoration: none;
        text-decoration-style: initial;
        text-decoration-color: initial;
    }
    p {margin: 1em 0;}
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
    h1 {
        text-align: center;
        font-size: 40px;
        margin-bottom: 20px;
        line-height: 1.2em;
        font-weight: 300;
        text-transform: none;
    }
    h1, h2, h3, h4, h5, h6 {color: #3A3A3A !important;} /* or whatever color you want it to be */

    h2 {
        font-size: 30px;
        margin-bottom: 20px;
        line-height: 1.2em;
        font-weight: 300;
        text-transform: none;
    }

    h3 {
        font-size: 20px;
        margin-bottom: 20px;
        line-height: 1.2em;
        font-weight: 400;
        text-transform: none;
    }

    body {
        margin: 0;
        padding: 0;
        color: #3a3a3a;
        font-weight: 400;
        text-transform: none;
        font-size: 17px;
        line-height: 1.5;
    }

    table {
        background: white;
        max-width: 1300px;
        margin-left: auto;
        margin-right: auto;
        line-height: 100% !important;
    }

    p {
        margin: 0;
        padding: 0;
    }

    .logo {
        margin-top: 3vh;
        width: 80%;
        max-width: 400px;
    }

    .subject-td {
        max-width: 100%;
        margin-top: 10px;
    }

    .center__text {
        text-align: center;
    }

    .main__content {
        padding-left: 5%;
        padding-right: 5%;
        padding-bottom: 5%;

    }

    .small {
        font-size: 12px;
    }
    .footer{
        padding-top: 10px;
    }
    </style>
</head>
<body>
<p></p>

<table border="0" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
        <td class="small center__text">Wenn du Unread durch Zufall erhalten hast, kannst du dich <a href="https://unread.news?newsletters_link=e4f7fa2ee4e645fd368c7ea87ca3b13d&history_id=1">hier</a> anmelden!</td>
    </tr>
    <tr>
        <td class="small center__text">Wenn Dir Unread gefällt, dann nimm Dir eine Sekunde Zeit und leite diese Mail an deine Freunde weiter.</td>
    </tr>
    <tr>
        <td class="center__text"><img class="logo" src="data:image/png;base64, ... base64 goes here ... " /></td>
    </tr>
    <tr>
        <td class="subject-td center__text">
            <h1>Unread News | Issue #1 14.05.2019</h1>
        </td>
    </tr>
    <tr>
        <td class="main__content"><div class="newsletters_content"><h2>Category 1</h2>
            <h3><a href="#">Lorem Ipsum Dolor Sit Amet</a></h3>
            <div>Lorem Ipsum Dolor Sit Amet</div>
            <h3><a href="#">Internet-Scanner: Zivilgesellschaft warnt vor zunehmender Deep Packet Inspection (7 Minuten Lesezeit)</a></h3>
            <div>Lorem Ipsum Dolor Sit Amet</div>
            <h2>Category 2</h2>
            <h3><a href="#">Lorem Ipsum Dolor Sit Amet</a></h3>
            <div>Lorem Ipsum Dolor Sit Amet</div>
            <h3><a href="https://unread.news?newsletters_link=3482e6577f5b6e4782986af5f755444e&history_id=1">Internet-Scanner: Zivilgesellschaft warnt vor zunehmender Deep Packet Inspection (7 Minuten Lesezeit)</a></h3>
            <div>Lorem Ipsum Dolor Sit Amet</div>
            <h2>Category 3</h2>
            <h3><a href="#">Lorem Ipsum Dolor Sit Amet</a></h3>
            <div>Lorem Ipsum Dolor Sit Amet</div>
            <h3><a href="https://unread.news?newsletters_link=3482e6577f5b6e4782986af5f755444e&history_id=1">Internet-Scanner: Zivilgesellschaft warnt vor zunehmender Deep Packet Inspection (7 Minuten Lesezeit)</a></h3>
            <div>Lorem Ipsum Dolor Sit Amet</div>
            <h2>Category 4</h2>
            <h3><a href="#">Lorem Ipsum Dolor Sit Amet</a></h3>
            <div>Lorem Ipsum Dolor Sit Amet</div>
            <h3><a href="https://unread.news?newsletters_link=3482e6577f5b6e4782986af5f755444e&history_id=1">Internet-Scanner: Zivilgesellschaft warnt vor zunehmender Deep Packet Inspection (7 Minuten Lesezeit)</a></h3>
            <div>Lorem Ipsum Dolor Sit Amet</div>
        </div></td>
    </tr>
    <tr>
        <td class="small footer center__text">This is emai was sent ...</td>
    </tr>
    <tr>
        <td class="small center__text">You are receiving this mail ... <a class="newsletters_unsubscribe newsletters_link" href="#" title="Abonnement Deaktivieren" style="color:;">Abonnement Deaktivieren</a>.</td>
    </tr>
    <tr>
        <td class="small center__text"><a class="newsletters_online newsletters_link" href="#" style="color:;">E-Mail ausdrucken</a></td>
    </tr>
    </tbody>
</table>
</body>
</html>

Apple Mail обрезает (не показывает) последние три тега: 

</tr>
<tr>
    <td class="small footer center__text">This is emai was sent ...</td>
</tr>
<tr>
    <td class="small center__text">You are receiving this mail ... <a class="newsletters_unsubscribe newsletters_link" href="#" title="Abonnement Deaktivieren" style="color:;">Abonnement Deaktivieren</a>.</td>
</tr>
<tr>
    <td class="small center__text"><a class="newsletters_online newsletters_link" href="#" style="color:;">E-Mail ausdrucken</a></td>
</tr>

Но яожидайте увидеть их.

1 Ответ

0 голосов
/ 20 мая 2019

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

Одна вещь, которая сработала и досадно взволнована - это добавление отступов в конец письма. Я обернул содержимое в другую таблицу и установил отступ в ячейке таблицы, оборачивая таблицу вашим содержимым. 50-пиксельного отступа было достаточно, чтобы толкнуть Apple Mail и показать все три строки.

...