Outlook の HTML 署名メールの作成に問題があります。
署名の前にスタイル タグがあり、レスポンシブ メールのメディア幅を追加します。
<style type="text/css">
div, p, a, li, td { -webkit-text-size-adjust:none; }
table {
min-width:650px;
}
@media only screen and (max-device-width: 480px) {
td[class=hidden-phone] {
width: 0px !important;
display: none !important;
overflow: hidden !important;
float: left !important;
}
td[class=description] {
width: 100% !important;
}
td[class=visible-phone] {
display: block !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
float:none !important;
}
table {
min-width: auto !important;
}
}
</style>
<table width="100%" style="font-family:'arial';">
<tr>
<td colspan="4" width="100%" style="height:10px;border-bottom:2px solid #96999e;height:0px;"> </td>
</tr>
<tr>
<td style="padding:10px;width:80px;min-width:80px;"><img src="http://urbanangles.com/fileserver/gallery/[[ID]]_original.png" /></td>
<td class="description" valign="bottom" style="padding:10px 0 10px 10px;width:170px;color:#111;min-width:170px;line-height:11px;">
<span style="font-size:11px"><strong>[[NAME]]</strong></span><br/>
<span style="font-size:11px;color:#007dc3;">[[TITLE]]</span><div style="margin-bottom:5px;"></div>
<span style="font-size:9px;">A Studio</span><br/>
<span style="font-size:9px;">10 Somewhere St, Suburb, STA 1234</span><br/>
<span style="font-size:9px;margin-right:10px;">D </span><span style="font-size:9px;">[[DIRECT]]</span><br/>
<span style="font-size:9px;margin-right:10px;">P </span><span style="font-size:9px;">[[PHONE]]</span><br/>
<span style="font-size:9px;margin-right:9px;">M </span><span style="font-size:9px;">[[MOBILE]]</span><br/>
<span style="font-size:9px;margin-right:10px;">E </span><span style="font-size:9px;"><a href="mailto:[[EMAIL]]" style="color:#111;text-decoration:none;">[[EMAIL]]</a></span><div style="margin-bottom:5px;height:0px;"></div>
<span style="font-size:11px"><strong><a style="color:#111;text-decoration:none;" href="http://www.examples.com">www.examples.com</a></strong></span><br/>
</td>
<td class="hidden-phone" style="width:100%;"></td>
<td class="hidden-phone" valign="bottom" style="padding:10px 10px 10px 0;width:360px;min-width:360px;"><span style="margin-right:15px;"><a href="http://www.facebook.com/urbanangles" style="margin-right:3px;"><img src="http://william.uadev.com.au/img/facebook.jpg" /></a> <a href="http://www.twitter.com/urban_angles"><img src="http://william.uadev.com.au/img/twitter.jpg" /></a></span> <a href="http://www.urbanangles.com"><img src="http://william.uadev.com.au/img/logo.jpg" /></a> </td>
</tr>
<!--[if !mso 9]><!-->
<tr>
<td colspan="1" width="100%" class="visible-phone" style="max-height:0;display:none;height:0;overflow:hidden;width:0;float:left">
<span style="margin-left:10px;margin-right:25px;">
<a href="http://www.facebook.com/examples" style="margin-right:5px;"><img src="http://william.uadev.com.au/img/facebook.jpg" /></a>
<a href="http://www.twitter.com/examples"><img src="http://william.uadev.com.au/img/twitter.jpg" /></a></span>
</td>
<td colspan="3" width="100%" class="visible-phone" style="max-height:0;display:none;height:0;overflow:hidden;width:0;float:left">
<a href="http://www.urbanangles.com"><img src="http://william.uadev.com.au/img/logo" style="width:80%;margin-left:8px;" /></a>
</td>
</tr>
<!--<![endif]-->
<tr><td colspan="4" width="100%" style="height:10px;border-top:2px solid #96999e;"></td> </tr>
</table>
<p style="font-size:11px;font-family:'arial';margin:0 0 5px 0;padding:0"><i>Please consider the environment before printing this email.</i></p>
<p style="font-size:9px;font-family:'arial';color:#999;margin:0 0 5px 0;padding:0">This email and any attachment(s) is intended only for the exclusive and confidential use of the addressee(s). If you are not the intended recipient, any use, interference with, disclosure or copying of this material is unauthorised and prohibited. If you have received this message in error, please notify the sender by return email immediately and delete the message from your computer without making any copies. [[COMPANY]] does not guarantee the integrity of any emails or attached files.</p>
Apple メールですべて正常に動作しました。ただし、Outlook は私の html に満足しているようには見えません。Outlook からのすべてのメールにはスタイル タグが含まれていないため、HTML が iphone で奇妙に見えます。
私の質問:
メールにスタイル タグが含まれていないのはなぜですか? 私が知っていることから、それは見通しでサポートされています。ここで参照を参照してください
私ができる回避策や修正はありますか? レスポンシブ メールを iPhone で動作させたいのですが、Apple Mail から送信すると動作することがわかっています。
乾杯、ウィル