2016-01-14 2 views
1

Я пытаюсь сделать HTML-отзывчивую подпись по электронной почте. Во всех браузерах (Chrome, Safari, Firefox и т. Д.) Он работает нормально. Но когда я посылаю это мой Apple Mail (OSX и IOS) не будет делать это реагировать (не масштабируется) :(, и они поддерживают его.Отзывчивый HTML-адрес электронной почты Подпись

Это мой код, может кто-то помочь?

<!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" /> 
    <title>Responsive HTML Email Signature</title> 
    <style type="text/css"> 

     /*Global Styles*/ 
     body { background: #eeeeee; margin: 0; padding: 0; min-width: 100%!important; font-family: 'Proxima Nova','Open Sans','Gill Sans MT','Gill Sans',Corbel,Arial,sans-serif; font-size: 11px; color: #000000; line-height: 17px;} 
     a { text-decoration: none; color: #000000;} 
     img {height: auto;} 
     .content { margin-top: 20px; margin-bottom: 20px; } 

     /*Media Queries*/ 
     @media only screen and (max-width: 751px){ 
      body { font-size:15px !important; line-height: 21px;} 
      .columns{width:100% !important;} 
      .columncontainer{display:block !important; width:100% !important;} 
      .listitem, .role {font-size: 16px;} 
     } 
     @media only screen and (min-width: 651px) { 
      .content {width: 650px !important;} 
     } 

    </style> 
</head> 
<body style="background: aqua;"> 

    <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td> 
      <!--[if (gte mso 9)|(IE)]> 
       <table width="540" align="center" cellpadding="0" cellspacing="0" border="0"> 
       <tr> 
        <td> 
      <![endif]--> 

       <!--Content Wrapper--> 
       <table class="content" bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0" border="0"> 

        <!--Signature--> 
        <tr> 
         <td style="padding: 0px 0px 0px 0px; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;"> 
          <table border="0" cellpadding="0" cellspacing="0" width="650" class="columns"> 
           <tr valign="top"> 
            <td width="60%" class="columncontainer" style="display:block; width:390px; border-right: 1px solid black; margin-top: 30px"> 
             <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
              <tr> 
               <td valign="top" style="padding: 30px 30px 30px 30px;"><a href="https://www.studioneonlight.com/"><img width="100%" src="https://www.studioneonlight.com/logo.png" /></a></td> 
              </tr> 
             </table> 
            </td> 
            <td width="40%" class="columncontainer"> 
             <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
              <tr> 
               <td valign="top" style="padding: 30px 30px 30px 30px;"> 
                <table border="0" cellspacing="0" cellpadding="0"> 
                 <tr style="font-weight: bold;"> 
                  <td width="100%" colspan="2"> 
                   Address 
                  </td> 
                 </tr> 
                 <tr> 
                  <td style="line-height: 10px;"> 
                   &nbsp; 
                  </td> 
                 </tr> 
                  <tr> 
                   <td width="40%" style="font-weight: bold;">telefoon</td> 
                   <td width="60%"><a href="tel:00000">phone number</a></td> 
                  </tr> 
                  <tr> 
                   <td width="40%" style="font-weight: bold;">e-mail</td> 
                   <td width="60%"><a href="mailto:[email protected]">[email protected]</a></td> 
                  </tr> 
                  <tr> 
                   <td width="40%" style="font-weight: bold;">website</td> 
                   <td width="60%"><a href="https://www.studioneonlight.com">studioneonlight.com</a></td> 
                  </tr> 
                </table> 
               </td> 
              </tr> 
             </table> 
            </td> 
           </tr> 
          </table> 
         </td> 
        </tr> 

        <!--Legal--> 
        <tr> 
         <td style="padding: 10px 30px 30px 30px;"> 
          <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
           <tr> 
            <td align="center" style="font-family: sans-serif; font-size: 13px; color: #ccc; padding: 20px 0 0 0;"> 
             WARNING: I cannot be help responsible for the contents of the message above, as apparently my cats have learned how to type. 
            </td> 
           </tr> 
          </table> 
         </td> 
        </tr> 

       </table> 

       <!--[if (gte mso 9)|(IE)]> 
         </td> 
        </tr> 
        </table> 
       <![endif]--> 
      </td> 
     </tr> 
    </table> 
</body> 

ответ

2

Это может помочь, но от того, что я понимаю в Apple Mail, страница HTML не должны иметь теги HTML, головы или тела. Эта страница подпись должна включать только встроенный CSS, и основные HTML элементы, такие как <div>, <span>, <img> и т. Д. Возможно, это может быть одной из проблем, которые почтовые клиенты не интерпретируют html signatur e, как вам нравится на OS X и iOS.

Отличный пример кода и шаблон, который вы можете использовать, это A responsive html email signature template. Это проект GitHub и содержит отличные инструкции по его использованию. Надеюсь, это поможет вам. Вероятно, я бы сравнил то, что у вас есть с шаблоном. Причина заключается в том, чтобы сделать кросс-браузер подписи html и поддерживаемым почтовым приложением, вам нужно убедиться, что вы обрабатываете все случаи краев для каждого почтового клиента и браузера. Еще один совет: вы должны использовать код html/css для определения того, является ли браузер сафари и обрабатывает кэш iOS/OS X. Взгляните на проект Github, и это поможет вам.

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