Apple Mail HTML 电子邮件右侧的白色 space

Question

<!DOCTYPE html>
<html lang="en">
<head>
<title>Social Superstore - Email template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">

    /* RESET STYLES */
    body{margin:0; padding:0;}
    img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
    table{border-collapse:collapse !important;}
    body{height:100% !important; margin:0; padding:0; width:100% !important;}

   
    @media screen and (max-width: 525px) {
     table {
      width: 100%;
     }
     .header-padding {
      padding-left: 10px;
      padding-right: 10px;
     }
     .logo {
      height: 50px;
      width: auto;
     }
     .mobile-hide {
      display: none !important;
     }
     .mobile-copy {
      text-align: center !important;
     }
     .mobile-center-btn {
      text-align: center !important;
     }
     .icon-image-tall {
      width: auto !important;
      height: 200px;
     }
     .icon-image-long {
      width: 200px;
      height: auto !important;
     }
     .icons_three_padding {
      padding-bottom: 40px;
     }
     .iphone_icon_mobile {
      width: 120px !important;
     }
     .money_icon_mobile {
      width: 120px !important;
     }
     .share_icon_mobile {
      width: 120px !important;
     }
     .icons_conatiners_height {
      height: auto !important;
     }
     .main-image-mobile {
      width: 90% !important;
     }
    }

</style>
</head>
<body>
 <!-- hidden preheader text -->
    <div style="display: none; font-size: 1px; color: #f2f2f2; line-height: 1px; font-family:  'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
        Hi @FIRSTNAME@, You are officially a #[COMPANY]. It's time to become a social butterfly. You should be proud of your new store because it truly is super… now let's find all your friends so that they can become Social Superstars too.
    </div>
    <!-- /hidden preheader text -->
 <!--container-->
 <table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#f2f2f2" style="background-color: #f2f2f2;">
  <tr>
   <td>
    <!--header container-->
    <table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#ffffff" style="background-color: #ffffff; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #dadada;">
     <tr>
      <td style="padding-top: 10px; padding-bottom: 10px;" class="header-padding">
       <!--header-->
       <center>
        <table cellspacing="0" cellpadding="0" border="0" width="600" bgcolor="#ffffff" style="background-color: #ffffff; margin-left: auto; margin-right: auto;">
         <tr>
          <td>
           <img src="http://placehold.it/64x64" alt="" style="font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color: #E72C7B; font-size: 24px;" width="64" class="logo">
          </td>
        </table>
       </center>
       <!--/header-->
      </td>
     </tr>
    </table>
    <!--/header container-->
    <!--hero container-->
    <table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#ffffff" style="background-color: #ffffff;">
     <tr>
      <td style="padding-top: 40px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px;">
       <!--hero copy-->
       <center>
        <table cellspacing="0" cellpadding="0" border="0" width="600" style="margin-left: auto; margin-right: auto; text-align: center;">
         <tr>
          <td style="font-size: 36px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; font-weight: bold; padding-bottom: 20px; color: #6a6a6a;" class="mobile-copy">
           Hi @FIRSTNAME@,
          </td>
         </tr>
         <tr>
          <td style="font-size: 18px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; line-height: 175%; color: #6a6a6a;" class="mobile-copy">
           You are officially a <span style="font-weight: bold">#[COMPANY]</span>. It's time to become a social butterfly. You should be proud of your new store because it truly is super… now let's find all your friends so that they can become Superstars too.
          </td>
         </tr>
        </table>
       </center>
       <!--/hero copy-->
      </td>
     </tr>
    </table>
    <!--/hero container-->
    <!--fill it up and launch container-->
    <table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#6a6a6a" style="background-color: #6a6a6a;">
     <tr>
      <td style="padding-top: 40px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px;">
       <!--fill it up and launch-->
       <center>
        <table cellspacing="0" cellpadding="0" border="0" width="600" style="margin-left: auto; margin-right: auto; text-align: center;" align="center">
         <tr>
          <td style="font-size: 48px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; font-weight: bold; padding-bottom: 20px; color: #ffffff; text-align: center;" class="mobile-copy">More followers,<br>more money</td>
         </tr>
         <tr>
          <td style="padding-bottom: 40px;"><img src="https://s3-eu-west-1.amazonaws.com/socialsuperstore-assets/emails/find-followers.png" alt="" style="width: 360px;" width="360" class="main-image-mobile"> 
          </td>
         </tr>
         <tr>
          <td style="font-size: 18px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; line-height: 175%; padding-bottom: 40px; color: #ffffff; text-align: center;" class="mobile-copy">Don't be shy… share share share! <br>Remember... Stay Social. Stay Super. </td>
         </tr>
         <tr>
          <td class="mobile-center-btn"><a href="#" style="font-size: 18px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #E72C7B; border-top: 10px solid #E72C7B; border-bottom: 10px solid #E72C7B; border-left: 25px solid #E72C7B; border-right: 25px solid #E72C7B; display: inline-block; text-transform: uppercase; text-align: center;" class="mobile-button">Share now &rarr;</a></td>
          </td>
         </tr>
        </table>
       </center>
       <!--/fill it up and launch-->
      </td>
     </tr>
    </table>
    <!--/fill it up and launch container-->
    <!--footer container-->
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                 <tr>
                     <td style="padding-top: 40px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px;">
                      <!--footer-->
                      <center>
                          <table width="600" cellpadding="0" cellspacing="0" align="center" style="text-align: center;">
                           <tr>
                                  <td style="font-size: 18px; line-height: 175%; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color: #999999; padding-bottom: 20px">Thanks,<br />
                                      The [COMPANY]team
                                  </td>
                              </tr>
                              <tr>
                                  <td style="font-size: 24px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color: #282828; font-weight: bold;">COPY GOES HERE</td>
                              </tr>
                              <tr>
                                  <td style="padding-top: 20px;">
                                      <a href="#" border="0"><img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0"></a>&nbsp;&nbsp;
                                      <a href="#" border="0"><img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0"></a>&nbsp;&nbsp;
                                      <a href="#" border="0"><img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0"></a>&nbsp;&nbsp;
                                      <a href="#" border="0"><img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0"></a>&nbsp;&nbsp;
                                      <a href="#" border="0"><img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0"></a>
                                  </td>
                              </tr>
                          </table>
                         </center>
                         <!--/footer-->
                     </td>
                 </tr>
             </table>
             <!--/footer container-->
             <!-- Unsubscribe container -->
             <table border="0" cellpadding="0" cellspacing="0" width="100%">
                 <tr>
                     <td bgcolor="#282828" align="center" style="padding: 20px 0px; background-color: #282828;">
                         <!-- unsubscribe -->
                         <center>
                          <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="responsive-table">
                              <tr>
                                  <td align="center" style="font-size: 10px; line-height: 175%; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color:#ffffff;">
                                      <span class="appleFooter" style="color:#999;">
                                          [company]
                                      </span>
                                      <br><a class="original-only" style="color: #E72C7B; text-decoration: none;" href="http://$UNSUB$">Unsubscribe</a>
                                  </td>
                              </tr>
                          </table>
                         </center>
                         <!--/unsubscribe-->
                     </td>
                 </tr>
             </table>
             <!--/Unsubscribe container-->
   </td>
  </tr>
 </table>
 <!--/container-->
</body>
</html>

我创建了一些响应式 HTML 电子邮件，并注意到其中一些电子邮件在右侧显示白色 space（宽度约为 20-30 像素）。它只出现在 iPad 上？我附上了截图。关于如何摆脱它的任何想法？我已将 100% 宽度和 0 padding/margin 和 overflow-x: hidden 应用于 body 和 html 标签，但没有用。这与电子邮件中的内容量有关吗？没有这个问题的其他电子邮件有更多的内容（即它们更高，部分更多）。

http://imgur.com/kBgYmLm

Answer 1

这是一个棘手的难题。为了修复它，我编写了一个针对 only iPad 的媒体查询，并指定了正文的最小宽度。在我的测试中，这解决了这个问题。

https://www.emailonacid.com/app/acidtest/display/summary/H51ptRsq1CKfk3qClFhulAJfOoa7NeZ5uplotor0fc9kD/shared

@media screen and (device-width: 768px) and (device-height: 1024px) {
    body {min-width: 701px}
}

Apple Mail HTML 电子邮件右侧的白色 space

White space on right in Apple Mail HTML email

html

email

html-email

ipad

ios