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

【问题标题】：newsletter email show either on mobile or desktop in Outlook 2013在 Outlook 2013 中的移动设备或桌面上显示时事通讯电子邮件
【发布时间】：2018-05-15 17:35:50
【问题描述】：

当我将 html 文件作为文本插入 Outlook 2013 时，我遇到了问题。邮件的显示很好。似乎我根据移动设备还是桌面设备给出的指令似乎不适用于我查看 Outlook 时调整浏览器大小。如果在 Outlook 2013 之外的普通浏览器窗口中显示 html 文件，则显示隐藏功能可以正常工作。

我试过这个：

  <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 并发送测试邮件时，它不适用。我只是打开邮件并将浏览器窗口调整为移动设备大小，但似乎没有内容不适用于移动设备。在电子邮件的移动响应方面，我是否需要在实际设备上进行测试。在桌面上调整窗口大小时将更改不显示。

谢谢，如果有任何建议，我们将不胜感激。

【问题讨论】：

标签： email mobile outlook desktop newsletter

【解决方案1】：

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

这是不适用于@media 查询的电子邮件客户端的完整列表，是了解当前电子邮件状态的最佳指南。

祝你的电子邮件好运。

【讨论】：

【解决方案2】：

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

【讨论】：