1. дома
  2. Вопрос и ответ
  3. Не могу отлаживать шаблон сообщения электронной почты для Gmail Mobile

Не могу отлаживать шаблон сообщения электронной почты для Gmail Mobile

2016-11-10 1 views
1

http://codepen.io/anon/pen/dOGWQWНе могу отлаживать шаблон сообщения электронной почты для Gmail Mobile

Скриншоты из того, что это неправильно:

http://imgur.com/a/JjNLn

Независимо от того, что я пытаюсь изменить, я не могу получить ту часть, которая говорит: «Пусть мы предложите "или ниже, где говорится:« Хотите больше продуктов? », чтобы сосредоточиться в мобильном приложении gmail.
Если вы поворачиваете телефон в ландшафтном режиме, все отображается справа, но при нормальном вертикальном разрезе ширина блока не на 100%, хотя текст по-прежнему центрирован.
Затем текст нижнего колонтитула по какой-то причине выравнивается по тексту.

На gmail.com на мобильных устройствах Chrome весь шаблон выглядит так, как будто он совсем не предназначен для мобильных устройств и имеет полную ширину рабочего стола.

Как отладить это?
Я не могу использовать какой-либо инструмент dev в этих программах, и ничто из того, что я могу придумать в коде, должно заставить его сделать это.

<!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" /> 
    <!--[if !mso]><!--> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <!--<![endif]--> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="styles.css" /> 
    <style type="text/css"> 
/* Basics */ 
body { 
    Margin: 0; 
    padding: 0; 
    min-width: 100%; 
    background-color: #fff; 
} 
table { 
    border-spacing: 0; 
    font-family: sans-serif; 
    color: #123050; 
} 
td { 
    padding: 0; 
} 
table, tbody, tr, td { 
    border: none; 
    border-color: #fff; 
} 
img { 
    border: 0; 
} 
.wrapper { 
    width: 100%; 
    table-layout: fixed; 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
} 
.webkit { 
    max-width: 600px; 
    border: 1px solid #e1e1e1; 
    box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.15); 
} 
.outer { 
    Margin: 0 auto; 
    width: 100%; 
    max-width: 600px; 
    background: #fff; 
} 
.inner { 
    padding: 10px; 
} 
.contents { 
    width: 100%; 
} 
p { 
    Margin: 0; 
} 
a { 
    color: #ed9d2a; 
    text-decoration: none; 
} 
.h1 { 
    font-size: 21px; 
    font-weight: bold; 
    Margin-bottom: 18px; 
} 
.h2 { 
    font-size: 18px; 
    font-weight: bold; 
    Margin-bottom: 12px; 
} 
.full-width-image img { 
    width: 100%; 
    max-width: 600px; 
    height: auto; 
} 

/* One column layout */ 
.one-column .contents { 
    text-align: left; 
} 
.one-column p { 
    font-size: 14px; 
    Margin-bottom: 10px; 
} 

/*Two column layout*/ 
.two-column { 
    text-align: center; 
    font-size: 0; 
} 
.two-column .column { 
    width: 100%; 
    max-width: 300px; 
    display: inline-block; 
    vertical-align: top; 
} 
.two-column .contents { 
    font-size: 14px; 
    text-align: left; 
    border:1px solid #dedede; 
    border-radius: 3px; 
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1); 
    margin-bottom: 15px; 
} 
.two-column img { 
    width: 100%; 
    max-width: 280px; 
    height: auto; 
} 
.two-column .image { 
    padding: 9px 5px 0; 
} 
.two-column .text { 
    padding: 0 5px 17px; 
    padding-top: 10px; 
} 


/*Three column layout*/ 
.three-column { 
    text-align: center; 
    font-size: 0; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 
.three-column .column { 
    width: 100%; 
    max-width: 200px; 
    display: inline-block; 
    vertical-align: top; 
} 
.three-column img { 
    width: 100%; 
    max-width: 180px; 
    height: auto; 
} 
.three-column .contents { 
    font-size: 14px; 
    text-align: center; 
} 
.three-column .text { 
    padding-top: 10px; 
} 

/* Left sidebar layout */ 
.left-sidebar { 
    text-align: center; 
    font-size: 0; 
} 
.left-sidebar .column { 
    width: 100%; 
    display: inline-block; 
    vertical-align: middle; 
} 
.left-sidebar .left { 
    max-width: 100px; 
} 
.left-sidebar .right { 
    max-width: 500px; 
} 
.left-sidebar .img { 
    width: 100%; 
    max-width: 80px; 
    height: auto; 
} 
.left-sidebar .contents { 
    font-size: 14px; 
    text-align: center; 
} 
.left-sidebar a { 
    color: #85ab70; 
} 

/* Right sidebar layout */ 
.right-sidebar { 
    text-align: center; 
    font-size: 0; 
} 
.right-sidebar .column { 
    width: 100%; 
    display: inline-block; 
    vertical-align: middle; 
} 
.right-sidebar .left { 
    max-width: 100px; 
} 
.right-sidebar .right { 
    max-width: 500px; 
} 
.right-sidebar .img { 
    width: 100%; 
    max-width: 80px; 
    height: auto; 
} 
.right-sidebar .contents { 
    font-size: 14px; 
    text-align: center; 
} 
.right-sidebar a { 
    color: #70bbd9; 
} 

h2.featured { 
    font-size: 39px; 
    letter-spacing: -1px; 
    font-weight: bold; 
    font-style: italic; 
    color: #ffad38; 
    text-align: center; 
    margin: 0 auto 0px; 
} 
.subtitle { 
    font-size: 14px; 
    font-style: italic; 
    color: #7c8697; 
    text-align: center; 
    margin-bottom: 30px; 
} 
.bold { 
    font-weight: bold; 
} 
.header { 
    text-align: center; 
    padding-bottom: 25px; 
} 
.header-wrap { 
    background: #123050 center bottom no-repeat; 
    display: block; 
    width: 100%; 
} 
img.header-desktop { 
    display: block; 
    width: 100%; 
} 
img.header-mobile { 
    display: none; 
    height:1px; 
    width: 1px; 
} 
h3 { 
    color: #123050; 
    font-size: 27px; 
    text-align: center; 
    font-weight:900; 
    text-transform: uppercase; 
    letter-spacing: -1px; 
    margin-top: 0; 
    margin-bottom: 20px; 
} 
h4.suggest { 
    text-transform: uppercase; 
    font-weight: 900; 
    font-size: 17px; 
    letter-spacing: -1.5px; 
    margin-top: 0; 
    margin-bottom: 10px; 
} 
td.suggest { 
    padding-top: 31px; 
} 
h5 { 
    text-transform: uppercase; 
    font-weight: bold; 
    margin-top: 10px; 
    margin-bottom:3px; 
} 
h3.fancy { 
    margin: 0 0 43px; 
} 
h3.fancy a { 
    color: #123050; 
    font-size: 24px; 
    text-transform: none; 
    font-weight: 600; 
    letter-spacing: 0; 
    margin: 0 0 43px; 
} 
h3.fancy a span { 
    color: #367eeb; 
    transition: 75ms ease-in color; 
} 
h3.fancy a:hover span { 
    color: #123050; 
} 
h4.fancy { 
    font-size: 17px; 
    font-weight: normal; 
    font-style: italic; 
    margin: 0 0 10px; 
} 
p.phone { 
    margin-bottom: 5px; 
} 
.category { 
    font-size: 13px; 
    font-style: italic; 
    margin-bottom: 30px; 
} 
p.feature-desc { 
    color: #414d62; 
    max-width: 465px; 
    margin: 0 auto; 
    margin-bottom: 40px; 
} 
a.button { 
    font-size: 14px; 
    font-weight: bold; 
    text-transform: uppercase; 
    letter-spacing: -0.5px; 
    border: 2px solid #ffaf3d; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    height: 37px; 
    width: 127px; 
    line-height: 37px; 
    text-decoration: none; 
    display: inline-block; 
} 
.button img { 
    display: none; 
} 
a.button-view { 
    background: #ffaf3d; 
    color: #fff; 
} 
a.button-info { 
    color: #ffaf3d; 
    width: 103px; 
} 
a.button-view:hover { 
    border-color: #ed9d2a; 
    background: #ed9d2a; 
    color: #fff; 
} 
a.button-info:hover { 
    background: #ffaf3d; 
    color: #fff; 
} 
.td-button { 
    font-size: 14px; 
    font-weight: bold; 
    text-transform: uppercase; 
    letter-spacing: -0.5px; 
    border: 2px solid #ffaf3d; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    height: 37px; 
    width: 127px; 
    line-height: 37px; 
    text-decoration: none; 
    display: inline-block; 
} 
.td-view { 
    background: #ffaf3d; 
    color: #fff; 
} 
.td-info { 
    color: #ffaf3d; 
    width: 103px; 
} 
.td-view a { 
    color: #fff; 
    height: 37px; 
    width: 127px; 
    line-height: 37px; 
    display: block; 
    text-align: center; 
} 
.td-info a { 
    color: #ffaf3d; 
    height: 37px; 
    width: 103px; 
    display: block; 
} 
.td-view:hover { 
    border-color: #ed9d2a; 
    background: #ed9d2a; 
    color: #fff; 
} 
.td-info:hover { 
    background: #ffaf3d; 
    color: #fff; 
} 
.td-view:hover a { 
    border-color: #ed9d2a; 
    background: #ed9d2a; 
    color: #fff; 
} 
.td-info:hover a { 
    background: #ffaf3d; 
    color: #fff; 
} 

a.small-button { 
    color: #152845; 
    font-size: 11px; 
    font-weight: bold; 
    text-transform: uppercase; 
    margin: 3px 0; 
    text-decoration: none; 
} 
img.separator { 
    width: auto; 
    height: 10px; 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
} 
a.small-button-view { 
} 
a.small-button:hover { 
    color: #384c69; 
} 
.shadow { 
    box-shadow: 0px 5px 9px -5px rgba(0,0,0,0.2); 
    border-bottom: 1px solid #ddd; 
    padding-top: 37px; 
    padding-bottom: 35px; 
} 
.more { 
    padding-top: 22px; 
    padding-bottom: 47px; 
    text-align: center !important; 
    box-sizing: border-box; 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
} 
.footer { 
    background: #123050; 
} 
.footer p { 
    color: #fff; 
    height: 45px; 
    padding-top: 10px; 
    margin: 0; 
    text-align: center; 
} 
.footer a { 
    color: #fff; 
    display: inline-block; 
    height: 40px; 
} 
.footer span { 
    padding-right: 5px; 
} 
.center, .text, h4, h5 { 
    text-align: center; 
} 


@media (max-width:599px) { 

/* img.header-mobile { 
     display: inline !important; 
     height: auto; 
     width: auto; 
    } 
    img.header-desktop { 
     display: none; 
     height: 1px; 
     width: 1px; 
    } 
*/ 

    .one-column .contents { 
    text-align: center !important; 
    } 
} 


</style> 

    <!--[if (gte mso 9)|(IE)]> 
    <style type="text/css"> 
     table {border-collapse: collapse;} 
    </style> 
    <![endif]--> 
</head> 
<body> 
    <center class="wrapper"> 
     <div class="webkit"> 
      <!--[if (gte mso 9)|(IE)]> 
      <table width="600" align="center"> 
      <tr> 
      <td> 
      <![endif]--> 
      <table class="outer" align="center"> 
       <tr> 
        <td class="header"> 
         <a class="header-wrap" href="">logo</a> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <h2 class="featured">Featured Product</h2> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <p class="subtitle">Recommendations for <span class="bold">All Star Marketing</span></p> 
        </td> 
       </tr> 
       <tr> 
        <td class="full-width-image"> 
         <img src="http://www.inventionhome.com/dev/hotlink/images/featured.jpg" width="600" alt="" /> 
        </td> 
       </tr> 
       <tr> 
        <td class="one-column"> 
         <table width="100%"> 
          <tr> 
           <td style="padding-top: 37px; padding-bottom: 35px;" class="inner contents shadow"> 
            <h3>Item Name</h3> 
            <p class="feature-desc">Item Name is an electronic warmer, featuring a lightweight design that enables easy transportation of a hot food item between locations.</p> 

            <div style="width: 243px; margin: 0 auto; text-align: center;"> 
             <table width="100%; max-width: 243px;"> 
              <tr> 
               <td class="td-button td-view" valign="middle" align="center"> 
                <a href="" title=""><p style="display: block;">View Product</p><p style="display: block; height: 7px;">&nbsp;</p></a> 
               </td> 
               <td> 
                <img src="http://www.inventionhome.com/dev/hotlink/images/5x20.png" alt="" /> 
               </td> 
               <td class="td-button td-info" valign="middle" align="center"> 
                <a href="" title=""><p style="display: block;">More Info</p><p style="display: block; height: 7px;">&nbsp;</p></a> 
               </td> 
              </tr> 
             </table> 
            </div> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 
       <tr> 
        <td class="one-column"> 
         <!--[if (gte mso 9)|(IE)]> 
         <table width="100%"> 
         <tr> 
         <td width="50%" valign="top"> 
         <![endif]--> 
         <div class="column"> 
          <table width="100%"> 
           <tr> 
            <td class="inner"> 
             <table class="contents"> 
              <tr> 
               <td style="padding-top: 31px;" class="inner contents suggest"> 
                <h4 class="suggest" vspace="50">May we also suggest</h4> 
               </td> 
              </tr> 
             </table> 
            </td> 
           </tr> 
          </table> 
         </div> 
         <!--[if (gte mso 9)|(IE)]> 
         </td><td width="50%" valign="top"> 
         <![endif]--> 
        </td> 
       </tr> 
       <tr> 
        <td class="two-column"> 
         <!--[if (gte mso 9)|(IE)]> 
         <table width="100%"> 
         <tr> 
         <td width="50%" valign="top"> 
         <![endif]--> 
         <div class="column"> 
          <table width="100%"> 
           <tr> 
            <td class="inner"> 
             <table class="contents"> 
              <tr> 
               <td class="image"> 
                <img src="http://www.inventionhome.com/dev/hotlink/images/1.jpg" width="280" alt="" /> 
               </td> 
              </tr> 
              <tr> 
               <td class="text"> 
                <h5>Item Name</h5> 
                <p class="category">Kitchen</p> 
                <p> 
                <a class="small-button small-button-view" href="" title="">View Product</a> 
                <img class="separator" src="http://www.inventionhome.com/dev/hotlink/images/separator.jpg" alt="" /> 
                <a class="small-button small-button-info" href="" title="">More Info</a> 
                </p> 
               </td> 
              </tr> 
             </table> 
            </td> 
           </tr> 
          </table> 
         </div> 
         <!--[if (gte mso 9)|(IE)]> 
         </td><td width="50%" valign="top"> 
         <![endif]--> 
         <div class="column"> 
          <table width="100%"> 
           <tr> 
            <td class="inner"> 
             <table class="contents"> 
              <tr> 
               <td class="image"> 
                <img src="http://www.inventionhome.com/dev/hotlink/images/2.jpg" width="280" alt="" /> 
               </td> 
              </tr> 
              <tr> 
               <td class="text"> 
                <h5>Item Name</h5> 
                <p class="category">Kitchen</p> 
                <a class="small-button small-button-view" href="" title="">View Product</a> 
                <img class="separator" src="http://www.inventionhome.com/dev/hotlink/images/separator.jpg" alt="" /> 
                <a class="small-button small-button-info" href="" title="">More Info</a> 
               </td> 
              </tr> 
             </table> 
            </td> 
           </tr> 
          </table> 
         </div> 
         <!--[if (gte mso 9)|(IE)]> 
         </td> 
         </tr> 
         </table> 
         <![endif]--> 
        </td> 
       </tr> 
       <tr> 
        <td class="two-column"> 
         <!--[if (gte mso 9)|(IE)]> 
         <table width="100%"> 
         <tr> 
         <td width="50%" valign="top"> 
         <![endif]--> 
         <div class="column"> 
          <table width="100%"> 
           <tr> 
            <td class="inner"> 
             <table class="contents"> 
              <tr> 
               <td class="image"> 
                <img src="http://www.inventionhome.com/dev/hotlink/images/two-column-01.jpg" width="280" alt="" /> 
               </td> 
              </tr> 
              <tr> 
               <td class="text"> 
                <h5>Item Name</h5> 
                <p class="category">Kitchen</p> 
                <a class="small-button small-button-view" href="" title="">View Product</a> 
                <img class="separator" src="http://www.inventionhome.com/dev/hotlink/images/separator.jpg" alt="" /> 
                <a class="small-button small-button-info" href="" title="">More Info</a> 
               </td> 
              </tr> 
             </table> 
            </td> 
           </tr> 
          </table> 
         </div> 
         <!--[if (gte mso 9)|(IE)]> 
         </td><td width="50%" valign="top"> 
         <![endif]--> 
         <div class="column"> 
          <table width="100%"> 
           <tr> 
            <td class="inner"> 
             <table class="contents"> 
              <tr> 
               <td> 
                <img src="http://www.inventionhome.com/dev/hotlink/images/4.jpg" width="280" alt="" /> 
               </td> 
              </tr> 
              <tr> 
               <td class="text"> 
                <h5>Item Name</h5> 
                <p class="category">Kitchen</p> 
                <a class="small-button small-button-view" href="" title="">View Product</a> 
                <img class="separator" src="http://www.inventionhome.com/dev/hotlink/images/separator.jpg" alt="" /> 
                <a class="small-button small-button-info" href="" title="">More Info</a> 
               </td> 
              </tr> 
             </table> 
            </td> 
           </tr> 
          </table> 
         </div> 
         <!--[if (gte mso 9)|(IE)]> 
         </td> 
         </tr> 
         </table> 
         <![endif]--> 
        </td> 
       </tr> 
       <tr> 
        <td class="one-column"> 
         <table width="100%"> 
          <tr> 
           <td class="inner contents more"> 
            <h4 class="fancy">Want more products?</h4> 
            <h3 class="fancy"><a href="http://www.ishowonline.com/" title="iShowOnline">Visit <span>Us Here</span></a></h3> 
            <h4 class="fancy">Contact us at</h4> 
            <p class="center phone"><strong>1-888-888-7777</strong></p> 
            <p class="center"><a style="font-weight: bold;" href="mailto:[email protected]" title="email">[email protected]</a></p> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 
       <tr> 
        <td style="background: #123050;" class="one-column footer"> 
         <table width="100%"> 
          <tr> 
           <td class="inner contents"> 
            <p class="center"><span style="color: #fff;">Connect with us</span> <a class="social-icon" href="https://www.facebook.com/invention.home/" title=""><img src="http://www.inventionhome.com/dev/hotlink/images/facebook.png" alt="Facebook" /></a><a class="social-icon" href="https://twitter.com/Inventionhome" title=""><img src="http://www.inventionhome.com/dev/hotlink/images/twitter.png" alt="Twitter" /></a></p> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 
      </table> 
      <!--[if (gte mso 9)|(IE)]> 
      </td> 
      </tr> 
      </table> 
      <![endif]--> 

     </div> 
    </center> 
</body> 
</html>

источник

2016-11-10 asharpdesigner

ответ

1

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

Но, как вы сказали, если я использую браузер Chrome и войду в gmail, он выглядит так, как вы описали.

Причина в том, что GMAIL убирает ваш встроенный лист стилей при просмотре в браузере. Исходное сообщение не повреждено, но клиент отображает его без таблиц стилей.

Чтобы обойти эту проблему, вам нужно закодировать стили, используя атрибут стиля в HTML-элементе, например.

<table style="text-align:center">

Теперь ваш следующий вопрос: как узнать это? Я ударил F12 в Google Chrome на своем рабочем столе, а затем просмотрел электронную почту. Это позволяет мне видеть HTML и стили. Затем в инструментах разработчика я нажимаю на Toggle Device Toolbar, затем выбираю устройство, которое я хочу подражать, в этом случае я выбираю iPhone 6+.

Затем вы можете посмотреть на html и отрегулировать его и исправить в инструментах.

Я также предлагаю вам сделать Inbox Testing, просматривая содержание письма. Я думаю, что вы попадете в спам-бокс в нескольких местах.

источник

2016-11-11 01:02:09 Henry

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

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