10

私はモバイルデバイス用のHTMLメールの最適化に取り組んでいます。私は、2列から1列のレスポンシブレイアウトを作成するための普遍的なソリューションを見つけるという任務を負っています。キャンペーンモニターによって書かれた記事を見つけました-http ://www.campaignmonitor.com/guides/mobile/sensitive/。私はそれらのマークアップを試しましたが、Outlook 2007、2010、および2013を除くほとんどのクライアントとブラウザーで機能します。参照用にマークアップを含むjsfiddleリンクを提供しました。これらのバージョンのOutlookでこれを機能させる方法はありますか？

編集：私はメールのレスポンシブ部分をOutlookで機能させようとはしていません。2つのテーブル（jsfiddleの例では左と右）を積み重ねるのではなく、並べて表示したいと思います。これは、Gmail（IE、FF、Chrome、Safari）、AOL（IE、FF、Chrome、Safari）、Yahoo（IE、FF、Chrome、Safari）、Hotmail（IE、FF、Chrome、Safari）、AppleMail4で機能します。 ＆5、Outlook 2003、Android 4.0、iOS 4、5、および6。私の懸念は、レンダリングエンジンが変更されたOutlook2007以降のみです。

<html>
<head>
  <style>
    @media all and (max-width: 590px){
      *[class].responsive{ width: 320px !important; }
    }
  </style>
</head>
<body>
  <table width="100%" style="background-color: #000;" align="center" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td height="15"></td>
      </tr>
      <tr>
        <td width="100%">
          <table width="560" style="background-color: #fff;" align="center" cellpadding="0" cellspacing="0" class="responsive">
            <tbody>
              <tr>
                <td width="100%">
                  <table width="280" align="left" cellpadding="0" cellspacing="0" class="responsive">
                    <tbody>
                      <tr>
                        <td width="100%" height="40" style="background-color: #ececec;">
                          <div height="40" style="font-weight:bold; font-family:Helvetica,sans-serif; text-align:center;">Left (top)</div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <table width="280" align="left" cellpadding="0" cellspacing="0" class="responsive">
                    <tbody>
                      <tr>
                        <td width="100%" height="40" style="background-color: #bcbcbc;">
                          <div height="40" style="font-weight:bold; font-family:Helvetica,sans-serif; text-align:center;">Right (bottom)</div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td height="15"></td>
      </tr>
    </tbody>
  </table>
</body>
</html>

http://jsfiddle.net/bxdUp/

4

4 に答える 4

4

スタッキングテーブルに追加align="left"してみましたか？align="right"

更新されたフィドルを参照してください：http：//jsfiddle.net/bxdUp/1/

現在、で適切なテーブルがありますがalign="left"、Outlookのテーブルの配置で値を操作することに成功しましたalign。

于 2012-10-18T13:04:02.600 に答える
3

このSOに出くわし、レスポンシブな2列のコンテンツも中心にある上記の問題の解決策を探している人にとって、Outlookの列のみを定義するために条件を使用すると、私の世界が1^300簡単になることがわかりました。もちろん、Outlookでは応答しなくなりましたが、実際には...FOutlookです。

<!-- define a 100% width table -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
  <td width="100%" style="text-align:center; background-color:white">

    <!-- define a fixed width table using a class for responsive.  I found that defining an arbitary height seemed to be important ~ silly Outlook -->
    <!-- align center -->
    <table cellpadding="0" cellspacing="0" class="fixedWidthTable" border="0" height="300" align="center">
      <tbody>
      <tr>
        <td>

          <!-- align left (this renders as float:left in webkit).  Absolutely defined width. -->
          <table cellpadding="0" cellspacing="0" border="0" width="300" align="left" style="margin:0;padding:0;width:300px">
            <tr>
              <td>
                <!-- content -->
              </td>
            </tr>
          </table>

    <!-- > THIS BIT IS THE KICKER < whack in a column if Outlook -->
    <!--[if mso]></td><td><![endif]-->
    <!-- Brilliant. -->

          <!-- align right (this renders as float:right in webkit).  Absolutely defined width. -->
          <table cellpadding="0" cellspacing="0" border="0" width="300" align="right" style="margin:0;padding:0;width:300px">
            <tr>
              <td>
                <!-- content -->
              </td>
            </tr>
          </table>

        </td>
      </tr>
    </table>


    ... close outer tables etc.
于 2013-10-15T22:04:13.750 に答える
0

I've found that reductions in table widths by a few pixels work in the case for Outlook, which I can only assume is Outlook rendering pixel widths differently than other email clients.

Not ideal, but it has worked for me.

于 2013-02-19T02:07:44.840 に答える
0

Outlookのバージョンでは機能しないと思います。まず第一に、Outlookはメディアクエリを理解していないからです。Outlookバージョン2007はIEのレンダリングエンジンに基づいていますが、Outlookバージョン2010およびバージョン2013は、HTMLメールを表示するためのレンダリングエンジンとしてWordを使用しています。したがって、Outlookでそれらを機能させる方法はないと思います。

もう1つのポイントは、このコードをOutlookで実行すると、スタイルタグ内にあるすべてのものが無視されることです。Outlookの電子メールのインラインとしてスタイルを指定する必要があります。

于 2012-10-17T19:21:12.223 に答える