可能であれば、iPhone 用に最適化され、後で Android 用にも最適化された電子メール テンプレートを設計しようとしています。ヘッダー用のクラス「mobileheader」で別のヘッダーを作成し、クラス「mobilenav」でナビゲーションメニューを作成しましたが、iPhone で正常に動作します。問題は、それが電子メール クライアントに隠されているはずであり、デスクトップ バージョンが表示されることです。これは、Safari、Firefox、Chrome の Outlook.com、Gmail、Yahoo、および 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"> </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 でナビゲーションが表示されなかったので、変更する必要がありました。
どんな助けでも素晴らしいでしょう。御時間ありがとうございます。