Question

当我将html文件作为文本插入Outlook 2013时，我遇到了问题。邮件的呈现很好看来我根据移动设备或桌面显示的指示看起来似乎没有在查看Outlook时调整浏览器大小时应用。如果在Outlook 2013之外的普通浏览器窗口中显示html文件，则show hide功能可正常工作。

我试过这个：

  <style>

    #outlook a {padding:0;}     
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}     
    .ReadMsgBody {width: 100%;}
    .ExternalClass {width:100%;} 
    .backgroundTable {margin:0 auto; padding:0; width:100%;!important;} 
    table td {border-collapse: collapse;}
    .ExternalClass * {line-height: 115%;}

    span.show { display: none; }


    /* End reset */
    @media screen and (max-width: 480px){

        *[class="container"] { width: 320px !important; padding:0px !important}                                 
        *[class="mobile-column"] {display: block;}
        *[class="mob-column"] {float: none !important;width: 100% !important;}         
        *[class="mobile-padding"] {padding-left:10px !important;padding-right:10px !important;}         
        *[class="hide"] {display:none !important;}          
        *[class="100p"] {width:100% !important; height:auto !important;}            

        *[class="show"] {
             overflow: visible !important;
             float: none !important;
             display: block !important;
             line-height:100% !important;
            }



    }



     </style>

    <table border="0" cellpadding="0" cellspacing="0" class="mobile-padding" bgcolor="#EFEFEF" style="background-color: #EFEFEF; margin: 0; padding: 0" width="100%">
    <tr>
        <td align="center" valign="top">
            <table border="0" cellpadding="0" cellspacing="0" class="100p" width="600">
                <tr>
                    <td height="10"></td>
                </tr>

                <tr>
                    <td align="right" style="font-size:11px; color:#333333; font-family:Arial, Helvetica, sans-serif;">Email looking strange? <a href="##" style="color:#ad2f70; text-decoration:none;">View it in browser</a>
                    </td>
                </tr>
            </table>

            <table border="0" cellpadding="0" cellspacing="0" class="100p" width="600">
                <tr>
                    <td height="20"></td>
                </tr>
            </table>


            <table width="600" cellpadding="10" cellspacing="0" class="100p" border="0" bgcolor="#E4E4E5">
                <tr>
                    <td align="left" style="font-size:18px; color:#333333; font-family:Arial, Helvetica, sans-serif;">Hello!<span class="hide"><br /><br />This text is viewable on a larger screen.</span>

  <span class="show" style="overflow:hidden; float:left; display:none; line-height:0px;"><br />This is hidden on desktop!</span>
 </td>
                </tr>
            </table>

            <table border="0" cellpadding="0" cellspacing="0" class="100p" width="600">
                <tr>
                    <td height="20"></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

这是我在网上看到的一个工作恶魔的代码示例，但当我嵌入Outlook 2013并发送测试邮件时，它并不适用。我只是打开邮件并将浏览器窗口调整为移动大小，但没有任何内容似乎不适用于移动设备。在电子邮件的移动响应方面，我是否需要在实际设备上进行测试。在桌面上调整窗口大小时，更改不会显示。

谢谢，任何建议都会非常感激。

Answer 1

Outlook 2013,2016和2007不适用于@media次查询。

这是一个完整的电子邮件客户端列表，不支持@media个查询，是对当前电子邮件状态有用的指南。

祝你好运。

Answer 2

Microsoft Office Outlook使用Microsoft Office Word中的HTML解析和呈现引擎来显示HTML邮件正文。 Outlook中提供了Word中可用的相同HTML和级联样式表（CSS）支持。以下文章提供了与受支持和不受支持的HTML元素，属性和级联样式表属性相关的参考文档：

时事通讯电子邮件在Outlook 2013中显示在移动设备或桌面上

2 个答案: