iOS端Outlook 14邮件渲染异常问题求助

问题现象 #

iOS端Outlook 14中，邮件初始可正常渲染移动端视图，但到特定位置后所有内容突然缩小，呈现类似桌面端的显示效果。

问题代码片段 #

用户提供的相关代码如下：

图片区域代码 #

<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>

问题分析 #

1. 移动端内容切换逻辑不稳定：当前通过div.mobile_show设置display:none;width:0;overflow:hidden隐藏移动端内容，Outlook iOS对这种非标准的隐藏方式解析存在偏差，可能在渲染到文本区域时触发布局错乱，导致整体缩放。
2. 表格未做移动端自适应：外层wrapper表格固定width=600px，未在移动端重置为100%宽度；intro_width_mobile类无对应的移动端样式规则，导致该表格在移动端仍按桌面宽度渲染，触发Outlook iOS的强制缩放机制。
3. 缺少viewport配置：邮件头部未添加viewport元标签，移动端浏览器无法正确识别屏幕尺寸，加剧渲染偏差。

修复方案 #

1. 替换移动端内容切换方式 #

改用媒体查询控制桌面/移动端内容的显示，替代原有条件注释+隐藏div的方式，确保Outlook iOS能正确识别：

<!-- 桌面端图片区域 -->
<table class="desktop-only" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;max-width:100%;" width="600">
  <tr>
    <td align="center" valign="top">
      <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;max-width:600px;" width="600">
      </a>
    </td>
  </tr>
</table>

<!-- 移动端图片区域 -->
<table class="mobile-only" align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%;display:none;" width="100%">
  <tr>
    <td align="center" valign="top">
      <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;max-width:100%;" width="100%">
      </a>
    </td>
  </tr>
</table>

2. 添加媒体查询样式 #

在邮件头部的<style>标签中添加以下规则：

@media only screen and (max-width: 600px) {
  .desktop-only { 
    display: none !important; 
    width: 0 !important; 
    height: 0 !important; 
    overflow: hidden !important; 
  }
  .mobile-only { 
    display: table !important; 
    width: 100% !important; 
    max-width: 100% !important; 
  }
  .wrapper { 
    width: 100% !important; 
    max-width: 100% !important; 
  }
  .intro_width_mobile { 
    width: 100% !important; 
    max-width: calc(100% - 60px) !important; 
  }
}

3. 优化表格宽度设置 #

为所有外层包裹表格添加max-width:100%内联样式，确保自适应：

<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper" style="width:600px;max-width:100%;" width="600">

为intro_width_mobile表格添加内联宽度规则：

<table align="center" border="0" cellpadding="0" cellspacing="0" class="intro_width_mobile" style="width:100%;max-width:464px;">

4. 添加viewport元标签 #

在邮件头部添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

总结 #

以上修改针对Outlook iOS的渲染特性，通过明确的媒体查询控制、自适应宽度配置以及标准的移动端内容切换逻辑，解决内容中途缩放的问题，同时保持桌面端的正常显示效果。

内容的提问来源于stack exchange，提问作者adam h