Электронная почта не отвечает или не работает с iOS 12 - PullRequest
Новая
       31

Электронная почта не отвечает или не работает с iOS 12

0 голосов
/ 26 февраля 2019

Я занимаюсь этим часами, шаблон электронной почты выглядит великолепно (контейнер 600 пикселей на рабочем столе, полная ширина на мобильном телефоне) в Outlook, Gmail, Gmail для мобильных устройств - но iOS Apple Mail контейнер таблицы не имеет полную ширину и являетсявыровнен по левому краю.

Я отцентрировал таблицу контейнеров, добавил 0 отступов и отступ к элементу body и добавил <meta name="x-apple-disable-message-reformatting"> к заголовку.

Я могуне можете понять, почему электронная почта не отвечает так, как на мобильном телефоне - есть идеи?Я пытаюсь отправить этот шаблон электронной почты в формате HTML через Outlook 2016 (также проверял отправку с помощью Gmail) через «Вложение»> «Вставить как текст»> «Отправить».

Исходный код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta name="x-apple-disable-message-reformatting">
  <title>Why u no responsive?</title>
</head>
<body style="padding: 0; margin: 0; background: #f2f2f2;">
<table class="container" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
 <tr>
  <td align="center" bgcolor="#ffffff">
 <img src="https://placehold.it/600x260" alt="Test" width="600" height="263" style="margin: 0; padding: 0; border: 0; display:block; width: 100%;" />
</td>
 </tr>
 <tr>
  <td bgcolor="#ffffff" style="padding: 40px 0px 0px 0px;">
 <table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td style="text-transform: uppercase; text-align: center; color: #153643; font-family: 'Colibri', Arial, sans-serif; font-size: 24px;">
 <h1 style="margin-bottom: 0;"><b>Happy Holidays</b></h1>
 <p style="color: #ddd; font-size: 14px; letter-spacing: 5px;"><b>From Test Co</b></p>
</td>
 </tr>
 <tr>
  <td align="center" bgcolor="#ffffff">
 <img src="https://placehold.it/258x20" alt="Test" width="258" height="20" style="margin: 0; padding: 0; border: 0; display:block;" />
</td>
 </tr>
 <tr>
  <td align="center" bgcolor="#ffffff" style="padding: 40px 0 0px 0;">
 <img src="https://placehold.it/600x228" alt="Test" width="600" height="228" style="margin: 0; padding: 0; border: 0; display:block; width: 100%;" />
</td>
 </tr>
</table>
</td>
 </tr>
 <tr>
  <td bgcolor="#ffffff" style="padding: 0px 30px 20px 30px;">
 <table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td style="padding: 20px 0 20px 0; color: #153643; font-family: 'Colibri', Arial, sans-serif; font-size: 16px; line-height: 20px;">
 <p style="text-align: center; text-transform: uppercase; color: #ddd; font-size: 14px; letter-spacing: 5px;"><b>Looking Ahead</b></p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.</p>
  </td>
 </tr>
 <tr>
  <td style="padding: 20px 0 20px 0; color: #153643; font-family: 'Colibri', Arial, sans-serif; font-size: 16px; line-height: 20px;">
 <p style="text-align: center; text-transform: uppercase; color: #ddd; font-size: 14px; letter-spacing: 5px;"><b>Tax Reform</b></p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.</p>
  </td>
 </tr>
</table>
</td>
 </tr>
 <tr>
  <td align="center" bgcolor="#ffffff" style="padding: 0px 0px 0px 0px;">
 <img src="https://placehold.it/600x228" alt="Test" width="600" height="228" style="margin: 0; padding: 0; border: 0; display:block; width: 100%;" />
</td>
 </tr>
 <tr>
  <td bgcolor="#15274b" style="text-align: center; padding: 30px 30px 0px 30px; color: #fff; font-size: 12px; font-family: 'Colibri', Arial, sans-serif;">
    <h2 style="margin-bottom: 0px;"><b>Bob Sagett, CFP&reg;</b></h2>
    <p>Registered Principal, Financial Advisor</p>
  </td>
</tr>
 <tr>
  <td bgcolor="#15274b" style="text-align: center; padding: 0px 30px 0px 30px; color: #fff; font-size: 12px; font-family: 'Colibri', Arial, sans-serif;">
    <p>1234 Street Dr. Suite 225, Los Angeles, CA 90210<br/>T <a style="color: #b4a69d;" href="#" target="_blank">123.456.7890</a> . F <a style="color: #b4a69d;" href="#" target="_blank">123.456.7890</a> . <a style="color: #b4a69d;" href="#" target="_blank">Maps &amp; Directions</a></p>
    <p><a style="color: #b4a69d;" href="https://www.facebook.com/" target="_blank"><img src="https://i.imgur.com/TIrXkya.jpg" alt="Facebook" /></a> <a style="color: #b4a69d;" href="https://twitter.com/" target="_blank"><img src="https://i.imgur.com/EopMAy2.jpg" alt="Twitter" /></a> <a style="color: #b4a69d;" href="http://www.linkedin.com/" target="_blank"><img src="https://i.imgur.com/x6Injwb.jpg" alt="LinkedIn" /></a></p>
  </td>
</tr>
 <tr>
  <td bgcolor="#15274b" style="padding: 30px 30px 30px 30px; color: #fff; font-size: 12px; font-family: 'Colibri', Arial, sans-serif;">
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
</td>
 </tr>
</table>
</body>
</html>

Код был протестировани проверен ли w3 - есть идеи, что может быть с iOS Apple Mail?

...