Question

我的响应式电子邮件模板出现问题。当我添加if！mso语句时，为了防止我的移动版本在Outlook中的桌面版本下显示，它还会在移动电子邮件客户端上隐藏移动版本。如何在Outlook中隐藏移动版本但仍将其显示在移动客户端中？

CSS：

    @media screen and (max-width: 320px), screen and (max-device-width: 540px) 
    {body { -webkit-text-size-adjust: none;}
    div[id=desktop] {
    display:none !important;
    width:0px !important;
    overflow:hidden !important;
    }
    <!--[if !mso]><!-->
    div[id=mobile] {
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-height:inherit !important;
    overflow:visible !important;
    } <!--<![endif]-->

HTML：

    <!--MOBILE VERSION -->
    <!--[if !mso]><!-- -->
    <div style="width: 0px; display: none; max-height: 0px; overflow: hidden"  
    id="mobile">
    <table width="320" cellspacing="0" cellpadding="0" border="0" id="body">
    <tr><td>MOBILE CONTENT</td></tr>
    </table>
    </div>
    <!--<![endif]-->
    <!--END MOBILE VERSON-->

Answer 1

而不是条件注释，请将display:none设置为默认值：

div[id='desktop'], div[id='mobile'] { display: none; }

然后为支持媒体查询的客户端覆盖它：

 /* Desktop */
 @media screen
   {
   div[id='desktop'] { display: block; }
   div[id='mobile'] { display: none; }
   }

 /* Mobile */
 @media screen and (max-width: 320px)
   { 
   div[id='desktop'] { display: none; }
   div[id='mobile'] { display: block; }
   }

 /* Mobile */
 @media screen and (max-device-width: 540px)
   { 
   div[id="desktop"] { display: none; }
   div[id="mobile"] { display: block; }
   }

<强>参考

HTML ignored by Outlook

Outlook条件注释隐藏所有客户端上的移动版本

1 个答案: