Контент в электронной почте в формате HTML неправильно выравнивается на Android 6.0 и 4.4

Question

Контент в электронной почте в формате HTML неправильно выравнивается на Android 6.0 и 4.4

В настоящее время я работаю над электронной почтой в формате HTML, и мой контент идеально выравнивается посередине с другими почтовыми клиентами, но для Android 6.0 и приложения Gmail IMAP Android 4.4 первые два содержимого выравниваются по левому краю, а нижняя половина - по правому. Я изменил все выравнивание на середину, прежде чем тестировать, и они просто сдвигаются вправо. как я могу отцентрировать это.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <!--DISABLE APPLE REFORMATTING FOR IOS 11-->
    <meta name=”x-apple-disable-message-reformatting”>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="format-detection" content="telephone=no" /> <!-- disable auto telephone linking in iOS -->
    <title>Next Issue Media - Texture</title>

<style type="text/css">
    @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
    @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:700,400,300);

/** CLIENT RESETS **/
    .ReadMsgBody {width: 100%; background-color: #ffffff; }
    .ExternalClass {width: 100%; background-color: #ffffff; }
    .ExternalClass, .ExternalClass p, .ExternalClass span,
    .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height:100%; }
    #outlook a { padding:0; }
    html { width:100%; }
    table { mso-table-lspace:0pt; mso-table-rspace:0pt; border-spacing:0; }
    table td { border-collapse:collapse; }
    img { height: auto !important; line-height: 100%; outline: none; text-decoration: none; display:block !important; -ms-interpolation-mode:bicubic; }

    body { height:100% !important; margin:0 !important; padding:0 !important; width:100% !important; background-color:#FFFFFF; Margin:0; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }

 /** FOOTER and HEADER STYLES **/
     a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; }
    .appleLinksWht a { color:#FFFFFF; text-decoration: none; font-weight:300; }
    .stackUp { display:inline; }

    .raspberry {
background: #ad061c; /* Old browsers */
background: -moz-linear-gradient(top, #fa2153 20%, #ad061c 90%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #fa2153 20%,#ad061c 90%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #fa2153 20%,#ad061c 90%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa2153', endColorstr='#ad061c',GradientType=0 ); /* IE6-9 */}


@media only screen and (max-width: 499px){
.container { width: 100% !important; max-width: 100% !important; }
td[class="spacr"] { padding-top: 8px !important;  }

.logo { padding-top: 6px !important; padding-bottom: 6px !important; }
td[class="footrText"] { font-size:12px !important; padding-top:6px !important; }

.stackUp { display:block !important; }
.blkOut { color: #010101 !important; display:none !important; }
*[class="mobile-hide"] { display: none !important; visibility: hidden !important; font-size: 0px !important; width: 1px !important; }

table[class="textBloc"] { width: 90% !important; }
td[class="textBloc"] { font-size:15px !important; line-height:22px !important; padding-right:0px !important; padding-left:0px !important; }

a[class="ctaButtn"] { font-size:14px !important; border-width: 10px 36px 11px 36px !important; }

*[class="headline"] { font-size:30px !important; line-height:36px !important; padding-left:10px !important; padding-right:10px !important; }

/* 4 Col mobile settings */
    table[class="full-width"]{ width:100%!important; max-width:100%!important; min-width:100%!important; clear: both; }
    td[class="image-full-width"] img { width:100% !important; height:auto !important; max-width:100% !important; }

    td[class="titlesh2"]{ font-size:19px !important; line-height:22px !important; }

    table[class="containr-4Col"]{ width:100%!important; max-width:100%!important; min-width:100%!important; padding-left:14px !important; padding-right:14px !important; text-align: center !important; clear: both;}
    td[class="containr-4Col"]{ width:100%!important; padding-left:20px!important; padding-right:20px!important; clear: both; }
    table[class="space-w-20"]{ width: 100% !important; max-width:100% !important;  min-width:100% !important; }
    *[class="h-40"]{ height:40px; }

}

</style>


<style type="text/css">
@media screen and (max-width: 599px) {
/* 4 Col mobile settings */
  table[class="full-width"]{ width:100%!important; max-width:100%!important; min-width:100%!important; clear: both; }
  td[class="image-full-width"] img { width:100% !important; height:auto !important; max-width:100% !important; }

  td[class="titlesh2"]{ font-size:19px !important; line-height:22px !important; }

  table[class="containr-4Col"]{ width:100%!important; max-width:100%!important; min-width:100%!important; padding-left:14px !important; padding-right:14px !important; text-align: center !important; clear: both;}
  td[class="containr-4Col"]{ width:100%!important; padding-left:20px!important; padding-right:20px!important; clear: both; }
  table[class="space-w-20"]{ width: 100% !important; max-width:100% !important;  min-width:100% !important; }
  *[class="h-40"]{ height:40px; }
}
</style>



<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
  table {border-collapse: collapse !important !important !important;}
</style>
<![endif]-->

<!--[if gte mso 9]><xml><o:OfficeDocumentSettings>
<o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings>
</xml><![endif]-->

</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style=" -webkit-text-size-adjust:none;">




<!-- ===== ROW FOUR MAGAZINES ===== -->
<table width="100%" bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0" class="row">
   <tr>
     <td align="center">


<table class="container" style="max-width: 640px; padding-left: 0px; padding-right: 0px; background-color: #FFFFFF; width: 640px;" align="center" border="0" cellpadding="0" cellspacing="0" width="640">
      <tr>
          <td align="center" style="font-size: 10px; line-height: 10px; color:#FFFFFF; padding-top:8px; padding-bottom:4px;">&nbsp;  </td><!-- spacer -->

      </tr>
      <tr><td valign="top">
          <table class="full-width" style="width: 580px;" align="center" border="0" cellpadding="0" cellspacing="0" width="580"><tbody><tr><!--  change to container?  -->
          <td class="containr-4Col" valign="top">

          <!-- left col pair -->
          <table class="full-width" style="width: 48.2%;" align="left" border="0" cellpadding="0" cellspacing="0" width="48.2%"><tbody><tr><td valign="top">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr>
              <td class="image-full-width" style="width: 128px;" align="center" valign="top" width="128">
                <a href="" style="color: #00BDD3; text-decoration: none;">
                <img src="http://image.email.texture.com/lib/fe9a12717365047e71/m/14/featured_story_280x330.jpg" style="max-width: 128px; display: block;color:#23BCC9; font-size:12px; font-family: sans-serif;" alt="Story #1" border="0" width="128" /></a>
</td>
                </tr>
                <tr>
                   <td style="font-family: 'Roboto',sans-serif; font-size: 15px; line-height:20px; color:#010101; font-weight: 300; text-align: center; padding-top:10px; padding-bottom:0px;" align="center">
                   title
                  </td>
                </tr>
                <tr>
                   <td style="font-family: 'Roboto',sans-serif; font-size: 14px; line-height:18px; color:#FFFFFF; font-weight: 400; text-align: center; padding-top:8px; padding-bottom:22px;" align="center">
                    <a href="" style="font-weight: 500; color: #00BDD3 !important; text-decoration: underline;">Read Now</a>
                  </td>
                </tr></tbody></table></td>
            <td valign="top">
              <!-- space width 20px -->
              <table class="space-w-20" style="min-width: 20px; height: 1px; border-spacing: 0px; width: 20px;" align="left" border="0" cellpadding="0" cellspacing="0" width="20"><tbody><tr><td class="h-40" style="font-size: 0px; line-height: 0; border-collapse: collapse; width: 20px;" height="1" width="20">
                  </td>
                </tr></tbody></table><!-- space width 20px --></td>
             <td valign="top">
                      <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr>
                      <td class="image-full-width" style="width: 128px;" align="center" valign="top" width="128">
                        <a href="" style="color: #00BDD3 !important; text-decoration: none;">
                        <img src="http://image.email.texture.com/lib/fe9a12717365047e71/m/14/featured_story_280x330.jpg" style="max-width: 128px; display: block; color:#23BCC9; font-size:12px; font-family: sans-serif;" alt="Story #4" border="0" width="128" /></a></td>
                        </tr>
                <tr>
                   <td style="font-family: 'Roboto',sans-serif; font-size: 15px; line-height:20px; color:#010101; font-weight: 300; text-align: center; padding-top:10px; padding-bottom:0px;" align="center">
                   title
                  </td>
                </tr>
                <tr>
                  <td style="font-family: 'Roboto',sans-serif; font-size: 14px; line-height:18px; color:#FFFFFF; font-weight: 400; text-align: center; padding-top:8px; padding-bottom:22px;" align="center">
                  <a href="" style="font-weight: 500; color: #00BDD3 !important; text-decoration: underline;">Read Now</a>
                  </td>
                </tr></tbody></table></td>
          </tr></tbody></table><!-- END left col pair -->


                  <!--[if (gte mso 9)|(IE)]></td><td valign="top" ><![endif]--><!--[if (gte mso 9)|(IE)]></td><td valign="top" ><![endif]-->


                  <!--[if (gte mso 9)|(IE)]></td><td valign="top" ><![endif]--><!--[if (gte mso 9)|(IE)]></td><td valign="top" ><![endif]-->

                  <!-- right col pair -->
                  <table class="full-width" style="width: 48.2%;" align="right" border="0" cellpadding="0" cellspacing="0" width="48.2%"><tbody><tr><td valign="top">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr>
              <td class="image-full-width" style="width: 128px;" align="center" valign="top" width="128">
                <a href="" style="color: #00BDD3 !important; text-decoration: none;">
                <img src="http://image.email.texture.com/lib/fe9a12717365047e71/m/14/featured_story_280x330.jpg" style="max-width:128px; display: block; color:#23BCC9; font-size:12px; font-family: sans-serif;" alt="Story #3" border="0" width="128" /></a>
</td>
                </tr>
                <tr>
                   <td style="font-family: 'Roboto',sans-serif; font-size: 15px; line-height:20px; color:#010101; font-weight: 300; text-align: center; padding-top:10px; padding-bottom:0px;" align="center">
                  title
                  </td>
                </tr>
                <tr>
                   <td style="font-family: 'Roboto',sans-serif; font-size: 14px; line-height:18px; color:#FFFFFF; font-weight: 400; text-align: center; padding-top:8px; padding-bottom:22px;" align="center">
                    <a href="" style="font-weight: 500; color: #00BDD3 !important; text-decoration: underline;">Read Now</a>
                  </td>
                </tr></tbody></table></td>
                    <td valign="top">
                      <!-- space width 20px -->
                      <table class="space-w-20" style="min-width: 20px; height: 1px; border-spacing: 0px; width: 20px;" align="left" border="0" cellpadding="0" cellspacing="0" width="20"><tbody><tr><td class="h-40" style="font-size: 0px; line-height: 0; border-collapse: collapse; width: 20px;" height="1" width="20">
                          </td>
                        </tr></tbody></table><!-- space width 20px --></td>
                      <td valign="top">
                      <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr>
                      <td class="image-full-width" style="width: 128px;" align="center" valign="top" width="128">
                        <a href="" style="color: #00BDD3 !important; text-decoration: none;">
                        <img src="http://image.email.texture.com/lib/fe9a12717365047e71/m/14/featured_story_280x330.jpg" style="max-width: 128px; display: block; color:#23BCC9; font-size:12px; font-family: sans-serif;" alt="Story #4" border="0" width="128" /></a></td>
                        </tr>
                <tr>
                   <td style="font-family: 'Roboto',sans-serif; font-size: 15px; line-height:20px; color:#010101; font-weight: 300; text-align: center; padding-top:10px; padding-bottom:0px;" align="center">
                   title
                  </td>
                </tr>
                <tr>
                  <td style="font-family: 'Roboto',sans-serif; font-size: 14px; line-height:18px; color:#FFFFFF; font-weight: 400; text-align: center; padding-top:8px; padding-bottom:22px;" align="center">
                  <a href="" style="font-weight: 500; color: #00BDD3 !important; text-decoration: underline;">Read Now</a>
                  </td>
                </tr></tbody></table></td>
                  </tr></tbody></table><!-- END right col pair -->

                  </td>
            </tr></tbody></table></td>
      </tr>
        <!-- start space --><tr>
        <td style="font-size: 10px; line-height: 10; border-collapse: collapse;" height="12" valign="top">
        </td>
      </tr><!-- end space -->
   </table><!-- end container -->

           </td>
        </tr>
      </table>
<!-- ===== END FOUR MAGAZINES ===== -->





</body>
</html>

0

android html css responsive-emails

Источник

user5534358 19 сен '17 в 20:23

0 ответов

Другие вопросы по тегам android html css responsive-emails