HTMLメール：Outlookとモバイルの両方で動作するようにする

Question

私はHTMLメールのテンプレートを書いています（神は私の魂に慈悲を持っています）。

何もあまりにも派手な、無マルチカラムのレイアウトや何でも、まだ、私はこだわっています：いくつかのテキストや画像と、この中心部に整列ブロックがある - 設計は十分に簡単に見えます。

• デスクトップ画面では、中​​央ブロックの幅は480ピクセルにする必要があります。
縦向きで、携帯電話、オン
• 中央ブロックが画面の幅全体を取る必要があり、（それ未満480PXです）

ので（他のテンプレートに触発さから借り/）この問題への私のアプローチをされましたそのように、別の内部にもテーブル、100％の幅、および480PXの最大幅で、100％の幅を持つテーブルを作成します。それは、モバイル上で動作

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;"> 
    <tr> 
    <td align="center"> 
     <table border="0" cellpadding="0" cellspacing="0" width="100%" style="width: 100%; max-width: 480px;"> 
     <tr> 
      <td> 
       Some blah 
      </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
</table> 

。ブラウザクライアントで動作します。 Thunderbirdで動作します。 Apple Mailで動作します。それは私を笑わせる。もちろん、Outlookは最大幅を行うことができないため、中央ブロックを100％幅まで吹き飛ばします。

どのように私のコードを修正して、この設計がOutlookの偽物でも正しく動作するようにするにはどうすればよいですか？

EDIT：これは私がちょうど480PXに内部テーブルの幅を設定したときに、私は縦向きに携帯電話の画面になっていたものです：私はあなたがこのように行う

Answer 1

おそらく、あなたはthis trick from elidickinson使用することができます。

<!--[if mso]> 
<center> 
<table><tr><td width="480"> 
<![endif]--> 
<div style="max-width:480px; margin:0 auto;"> 
    ... 
</div> 
<!--[if mso]> 
</td></tr></table> 
</center> 
<![endif]--> 

Answer 2

を提案することができます

<table border="0" cellpadding="0" cellspacing="0" width="100%"> 
    <tr> 
    <td align="center"> 
     <table bgcolor="#f00" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td width="480"> 
       Some blah 
      </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
</table>