0
가능한 경우 iPhone 용으로 최적화 된 Android 용 템플릿을 디자인하려고합니다. "mobilenav"클래스가있는 탐색 메뉴와 머리글에 대해 "mobileheader"클래스와 다른 헤더를 만들었으며 iPhone에서 잘 작동합니다. 문제는 이메일 클라이언트에서 데스크톱 버전을 표시한다는 의미입니다. Safari, Firefox 및 Chrome의 Outlook.com, Gmail 및 Yahoo, Outlook 2010에서는 물론 IE9, Outlook.com에서도 잘 작동합니다. 모바일 버전 메뉴를 보여 주지만 페이지를 새로 고칠 수는 있지만 이상적이지는 않습니다. 몇 가지 테스트를 실행 한 코드를 확인했지만 문제가 어디에 있는지 알 수 없으므로 도움이 될 것입니다.Hotmail (Outlook)에서 이메일 디자인을위한 미디어 쿼리를 사용하는 데 문제가 있습니다
<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"> </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>
이
은 래퍼 (100 %) 표 다음에있는 CSS 코드입니다모바일 탐색에는 "mobilenav"클래스와 인라인 스타일 "display : none"이 있습니다. 이전에는 인라인 스타일에서 중요하지 않은 display none!을 사용하려고 시도했지만 iPhone에서 탐색을 표시하지 않았으므로 변경해야했습니다.
도움이 될 것입니다. 시간 내 주셔서 감사합니다.