2

我的响应式电子邮件模板有问题。当我添加 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-->
4

1 回答 1

0

而不是条件注释，设置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; }
   }

参考

于 2014-06-26T17:37:29.763 回答