Question

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

这是CSS的代码，它位于包装器（100％）表之后：

    <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

在Hotmail（Outlook）中使用媒体查询进行电子邮件设计时遇到问题

1 个答案: