Outlook 14 iOS 呈现问题

Question

你好长期潜伏者第一次提问 - 我在 iOS 上遇到了 Outlook 14 的问题。我发送了一个测试发送，它开始呈现移动视图应该看起来的样子，然后它到达一个点并将所有内容缩小，就像它的桌面一样。 coupla 代码块供参考：

<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper" style="width:600px;" width="600">
 
  <tr>
   <td align="center" bgcolor="#EAE6DD" height="auto" style="background-size:cover;height:auto; background-position:center;" valign="middle">
    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
     
      <tr>
       <td align="center" valign="top">
        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
         <!-- IMAGES AND TEXT SIT WITHIN THIS AREA -->
          <tr>
           <td align="center" class="hide" style="width:600px;" valign="top" width="600">
            <a href="https://www.grilld.com.au/relish?utm_source=email&utm_medium=email&utm_campaign=%%=v(@CampaignID)=%%" style="color:#000;text-decoration:none;" target="_blank"><img alt="Hey! you've earned this - enjoy a burg on us!" border="0" src="https://image.email.grilld.com.au/lib/fe3915707564067c721778/m/1/Taken_GIF_v2.gif" style="display:block;font-family:Arial, sans-serif;color:#ffffff;font-weight:bold;font-size:24px;max-width:600px;" width="600"></a></td><!--[if !mso 9]><!--><td align="center" valign="top">
            <div class="mobile_show" style="display:none;width:0;overflow:hidden;max-height:0!important">
             <table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper" width="100%">
              
               <tr>
                <td align="center" style="width:600px;" valign="top" width="600">
                 <a href="https://www.grilld.com.au/relish?utm_source=email&utm_medium=email&utm_campaign=%%=v(@CampaignID)=%%" style="color:#000;text-decoration:none;" target="_blank"><img alt="Hey! you've earned this - enjoy a burg on us!" border="0" height="auto" src="https://image.email.grilld.com.au/lib/fe3915707564067c721778/m/1/Taken_GIF_mobile_v2.gif" style="display:block;font-family:Arial, sans-serif;color:#ffffff;font-weight:bold;font-size:24px;max-width:600px;" width="100%"></a></td></tr></table></div></td><!--<![endif]--></tr><!-- IMAGES AND TEXT SIT WITHIN THIS AREA --></table></td></tr></table><!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td></tr></table>

<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper" style="width: 600px;" width="600">
 
  <tr>
   <td align="center" bgcolor="#EAE6DD" valign="top">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
     
      <tr>
       <td style="width: 30px;" width="30">
        &nbsp;</td><td align="center" valign="top">
        <table align="center" border="0" cellpadding="0" cellspacing="0" class="intro_width_mobile">
         
          <tr>
           <td height="20" style="height:20px; line-height:1px; font-size:1px;">
            &nbsp;</td></tr><tr>
           <td align="center" class="black" style="color:#000000; font-family:'Custom Font 1','Helvetica Neue',Helvetica, Arial, sans-serif; font-size:16px; line-height:21px; width:100%; max-width:464px; margin:0 auto; Margin:0 auto" valign="top" width="100%">
            There's more where that came from, so stop by again soon.<br>
            <br>
           Burg apetit!<br>
            
            </td></tr><tr>
           <td height="20" style="height:20px; line-height:1px; font-size:1px;">
            &nbsp;</td></tr></table></td><td style="width:30px;" width="30">
        &nbsp;</td></tr></table></td></tr></table>

TIA 为您提供帮助

Answer 1

Outlook 应用程序尝试通过在其 CSS 中添加 max-width:100% 来“修复”您的大图像。但是如果你使用例如max-width:600px 就像你一样，它将被覆盖。您可以使用max-width:600px!important inline（或您身体上的 id，例如#body .myimage {max-width:600px!important}）覆盖它。

或者，您可以依赖宽度：100%，而您的第一张图像没有。

这可能是触发器（无法正确调整大小的大图像或表格）。如果这不能解决问题，请告诉我们。