麻烦使用媒体查询的电子邮件设计在Hotmail(Outlook)

Question

我正在尝试设计一个电子邮件模板，也为iPhone和Android优化，如果可能的话。我用"mobileheader"类创建了一个不同的标题，用"mobilenav"类创建了一个导航菜单，它在iPhone上工作得很好。问题是，它应该隐藏在电子邮件客户端中，这意味着他们会显示桌面版本。这在Outlook.com, Gmail和雅虎的Safari, Firefox和Chrome以及Outlook 2010中工作得很好，但在IE9中，Outlook.com显示移动版本菜单，这可以修复刷新页面，但显然它远非理想。我已经检查了代码，并运行了几个测试，但我不知道问题可能在哪里，所以任何帮助将是伟大的。

这是位于包装器(100%)表之后的CSS代码:

    <style type="text/css">
a{text-decoration:none;}
.ExternalClass * {line-height: 100%}
.ExternalClass {width:100%;}                          
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font,        .ExternalClass td, .ExternalClass div {  line-height: 100%; }
body {margin:0; padding:0;-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}         
table td {border-collapse: collapse;}          
p {margin:0; padding:0; margin-bottom:0;line-height:100%;}       
.no-mobile{display:table;}
.contenttable1{width:600px;}
.contenttable{width:600px;}
.mobilenav{display:none !important;}
.mobileheader{display:none;}
.mobilelogo img{width:1px;height;1px;}
.web-version{font-size:1px;color:#FFFFFF;}  
@media only screen and (max-width: 600px) {
table[class="no-mobile"]{
    display:none !important;
}
table[class="contenttable1"]{
    width:320px !important;
}   
table[class="contenttable"]{
    width:320px !important;
}
table[class="centeredtable"]{
    text-align:center;
}
table[class="mobilenav"]{
    display:block !important;
}
table[class="mobilenav"] td img{
    width:600px !important;
}
table[class="mobileheader"]{
    display:block !important;
}   
table[class="logo"]{
    width:320px !important;
}
table[class="header"]{
    width:320px !important;
}
td[class="mobilelogo"]{
    height:60px;
}   
td[class="mobilelogo"] img{
    text-align:left;
    width:200px;
    height:60px;
}
td[class="mobiletext"]{
    height:60px;
}   
td[class="innerspacer15"] img{
    text-align:center;
}
span.[class="web-version"],font.[class="web-version"]{
    font-size:13px;
    color:#FFFFFF;
}
span[class="web-version"]{
    text-align:right !important;
    color:#000000 !important;
    font-size:13px !important;
    font-family:'Arial',Verdana,Sans-Serif !important;
    font-weight:normal !important;  
}
font[class="orangelink"]{
    text-align:right !important;    
    color:#FF5800;
    font-size:13px;
    font-family:'Arial',Verdana,Sans-Serif;
    font-weight:normal;     
}
}

标题和导航的代码:

                        <tr>
                    <td colspan="2" width="600">
                        <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" class="no-mobile">
                                <tr>
                                    <td width="157"><a href="~" target="_blank"><img src="image.gif" alt="Logo" width="157" height="54" border="0" style="display: block" /></a></td>
                                    <td align="right" style="text-align:right;line-height:0"><span style="font-family:'Arial',Verdana,Sans-Serif;color:#000000;font-size:13px">Problems seeing this email? <a href="#" target="_blank" style="font-family:'Arial',Verdana,Sans-Serif;color:#FF5800">Click here</a></span></td>                                  
                                    <td width="10" style="line-height:0" bgcolor="#FFFFFF">&nbsp;</td>
                                </tr>    
                        </table>                                                    
                        <table width="600" cellspacing="0" cellpadding="0" border="0" align="right" style="display:none;text-align:center" class="mobileheader" bgcolor="#FFFFFF">
                                <tr>
                                    <td width="200" height="1" style="text-align:left;line-height:0" align="center" class="mobilelogo" ><a href="#" target="_blank"><img src="image" alt="Logo" width="0" height="1" border="0" style="text-align:center" /></a></td>                               
                                    <td width="399" height="1" style="text-align:right;line-height:0" align="right" class="mobiletext"><span style="font-family:'Arial',Verdana,Sans-Serif;color:#FFFFFF;font-size:1px" class="web-version">Problems seeing this email?</span> <span style="font-family:'Arial',Verdana,Sans-Serif;color:#FFFFFF;font-size:1px"><a href="#" target="_blank" style="text-decoration:none;color:#FFFFFF" class="web-version"><font color="#FFFFFF" class="orangelink">Click here</font></a></span></td>                                                                   
                                </tr>    
                        </table>    
                    </td>
                </tr>

移动导航的类为"mobilenav"，内联样式为"display:none"。我以前尝试过在行内样式中使用display none !important，但是它没有显示iPhone中的导航，所以我不得不更改它。

任何帮助都太好了。感谢您的宝贵时间。

Answer 1

我花了将近2天的时间来弄清楚，这里是修复:

@media only screen and (max-width: 600px)

将max-width改为max-device-width