2016-02-02 2 views
0

Я пытаюсь сосредоточиться на своих электронных письмах, когда они открываются на мобильных устройствах. Кажется, он работает на всех устройствах прямо сейчас, кроме iPhone. Я тестировал его на 5 (он перекошен влево) и 6/6s (это неправильно). Проблема выглядит так, как будто это происходит только в родном почтовом приложении. В будущем мы будем реагировать на электронные письма, но на данный момент мы используем эти письма на основе HTML/таблицы (к сожалению).Письма не сосредоточены на iphone 5 и 6

<!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, maximum-scale=1" /> 

<title>Email Title</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="title" content="Email Title"> 
<meta name="description" content="Email Title"> 

<style media="all" type="text/css"> 
    table img { 
     display: block; 
    } 

    body { 
     width: 100% !important; 
     -webkit-text-size-adjust: 100%; 
     -ms-text-size-adjust: 100%; 
     margin: 0; 
     padding: 10px 20px; 
    } 

    .ReadMsgBody { 
     width: 100%; 
    } 

    .ExternalClass p, 
    .ExternalClass span, 
    .ExternalClass font, 
    .ExternalClass td { 
     line-height: 100% 
    } 

    table { 
     border-collapse: collapse; 
     mso-table-lspace: 0pt; 
     mso-table-rspace: 0pt; 
     padding: 0; 
    } 

    table td { 
     border-collapse: collapse; 
    } 

    p { 
     margin: 0 auto; 
     text-align: center; 
    } 
</style> 
</head> 
<body style="background-color: #ffffff; font-size: 10px; color: gray; font-family: Verdana, Arial, San-Serif, Geneva;"> 
    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
      <td align="center"> 

      <table width="640" align="center"> 
       <tr> 
        <td> 
         <table width="640" border="0" cellspacing="0" cellpadding="0" align="center"> 
          <tr> 
           <td align="left" style="padding:0;"> 
            <font face="Helvetica, sans-serif" style="font-size:12px; color:#b4b4b4;font-weight:400;"><a style="color:#b4b4b4;" href="">Shop</a></font> 
           </td> 
           <td align="right" style="padding:0;"> 
            <font face="Helvetica, sans-serif" style="font-size:12px; color:#b4b4b4;font-weight:400;"><a style="color:#b4b4b4;" href="">Women's</a>&nbsp;&nbsp;&nbsp;</font> 
            <font face="Helvetica, sans-serif" style="font-size:12px; color:#b4b4b4;font-weight:400;"><a style="color:#b4b4b4;" href="">Men's</a>&nbsp;&nbsp;&nbsp;</font> 
            <font face="Helvetica, sans-serif" style="font-size:12px; color:#b4b4b4;font-weight:400;"><a style="color:#b4b4b4;" href="">Apartment</a></font> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 
      </table> 
      <br> 


      <!--Dynamic header--> 
      <!-- logo --> 
      <table align="center" border="0" cellpadding="0" cellspacing="0" width="640"> 
       <tr> 
        <td width="640"> 
         <a href=""><img src="" border="0" alt="" width="640" height="45" style="display:block"> 
         </a> 
        </td> 
       </tr> 
      </table> 

      <!--Begin Email--> 

      <table align="center" border="0" cellpadding="0" cellspacing="0" width="640"> 
       <tr> 
        <td> 
         <a href=""> 
          <img src="" style="display:block;" border="0" alt="graphic1"> 
         </a> 
        </td> 
       </tr> 
      </table>     



      <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="spacing"> 
       <tr> 
        <td height="10px">&nbsp;</td> 
       </tr> 
      </table> 
    </body> 
</html> 

Я чувствую, что я попытался просто обо всем, в том числе с использованием <center> тег, но ничего не делает его сдвинуть с места.

ETA: Вот скриншот того, что он выглядит на прошивкой 9 Example

+0

что не центрирования? всю таблицу? или что-то в таблице? –

+0

Весь адрес электронной почты – sandramc

+0

Дайте мне знать, если мой ответ сработал или нет! Любопытно в любом случае ... – valosip

ответ

0

Во-первых, не совсем уверен, что вы имеете в виду под «не центрирования». Если это для всей таблицы, не ориентированной на экран, взгляните на ваш встроенный стиль. Есть несколько значений ширины и высоты; Я решительно отвергаю встроенный стиль по многим причинам. Попытайтесь избавиться от всех из них и вместо этого измените ширину на проценты и посмотрите, что произойдет.

Таблица обычно помещается внутри контейнера, если содержимое внутри таблицы не установлено больше.

0

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

Bootstrap делает адаптивный дизайн а также «центрирование» смехотворно легко.

+0

Я слышал, но, к сожалению, это вопрос политики, а не проблема развития. Мы все ждем того дня, когда мы сможем написать отзывчивый адрес электронной почты здесь! – sandramc

+0

Офисная политика сосать ха-ха, снова просмотрев ваш код, вы попробовали добавить margin: auto для элемента body? Все, что я вижу, - margin: 0 ... – Maxwelll

0

Вы можете просто изменить всю ширину жесткой кодировки как процент вместо заданного значения. Если вы замените все 640px на 100%, тогда он отлично выглядит на моем iPhone 6s +. Затем вы можете ограничить максимальную ширину так, как вам нужно.

<!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, maximum-scale=1" /> 

<title>Email Title</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="title" content="Email Title"> 
<meta name="description" content="Email Title"> 

<style media="all" type="text/css"> 
    table img { 
     display: block; 
    } 

    body { 
     width: 100% !important; 
     -webkit-text-size-adjust: 100%; 
     -ms-text-size-adjust: 100%; 
     margin: 0; 
     padding: 10px 20px; 
     max-width: 640px; 
     margin: auto; 
    } 

    .ReadMsgBody { 
     width: 100%; 
    } 

    .ExternalClass p, 
    .ExternalClass span, 
    .ExternalClass font, 
    .ExternalClass td { 
     line-height: 100% 
    } 

    table { 
     border-collapse: collapse; 
     mso-table-lspace: 0pt; 
     mso-table-rspace: 0pt; 
     padding: 0; 
    } 

    table td { 
     border-collapse: collapse; 
    } 

    p { 
     margin: 0 auto; 
     text-align: center; 
    } 
</style> 
</head> 
<body style="background-color: #ffffff; font-size: 10px; color: gray; font-family: Verdana, Arial, San-Serif, Geneva;"> 
    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
      <td align="center"> 

      <table width="100%" align="center"> 
       <tr> 
        <td> 
         <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> 
          <tr> 
           <td align="left" style="padding:0;"> 
            <font face="Helvetica, sans-serif" style="font-size:12px; color:#b4b4b4;font-weight:400;"><a style="color:#b4b4b4;" href="">Shop</a></font> 
           </td> 
           <td align="right" style="padding:0;"> 
            <font face="Helvetica, sans-serif" style="font-size:12px; color:#b4b4b4;font-weight:400;"><a style="color:#b4b4b4;" href="">Women's</a>&nbsp;&nbsp;&nbsp;</font> 
            <font face="Helvetica, sans-serif" style="font-size:12px; color:#b4b4b4;font-weight:400;"><a style="color:#b4b4b4;" href="">Men's</a>&nbsp;&nbsp;&nbsp;</font> 
            <font face="Helvetica, sans-serif" style="font-size:12px; color:#b4b4b4;font-weight:400;"><a style="color:#b4b4b4;" href="">Apartment</a></font> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 
      </table> 
      <br> 


      <!--Dynamic header--> 
      <!-- logo --> 
      <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> 
       <tr> 
        <td width="100%"> 
         <a href=""><img src="" border="0" alt="" width="100%" height="45" style="display:block"> 
         </a> 
        </td> 
       </tr> 
      </table> 

      <!--Begin Email--> 

      <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> 
       <tr> 
        <td> 
         <a href=""> 
          <img src="" style="display:block;" border="0" alt="graphic1"> 
         </a> 
        </td> 
       </tr> 
      </table>     



      <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="spacing"> 
       <tr> 
        <td height="10px">&nbsp;</td> 
       </tr> 
      </table> 
    </body> 
</html> 

enter image description here

+0

Обновленный ответ, чтобы отразить маржу и максимальную ширину – valosip

+0

Просто попробовал это, но у меня все еще есть проблемы. Он выглядит хорошо на iOS 8, но на iOS 9 все это скатывается вправо на родном мобильном приложении. – sandramc

+0

Можете ли вы добавить изображение того, как он выглядит. он отлично смотрелся на моем 6+ на ios9. – valosip

Смежные вопросы