1

会社の電子メール テンプレートを作成しています。モバイルかブラウザかに応じて、コンテンツを表示しようとしています。

表示属性が gmail で機能しないようです。ここにコード全体を貼り付けることはできません。これは私が使用するメディアクエリです。

  @media only screen and (max-device-width: 380px) {
    .mobileWidth {
      width: 290px !important; 
    }

    img { 
    max-width: 130px !important;
    max-height: 130px !important;
    }   

    .right {
      width: 100% !important;         
      position: relative !important;
    }       

     .test {
       width: 290px !important;
       text-align: center !important;
     }

     .showMobile {
       display:inline !important;
     }

    .hideMobile {
      display: none;
    }           
  } 

<html>
  <body>
    <!-- this div block is intended to by default not show in the browser and show in the mobile -->
    <table>
      <tr>
        <td>
          <div class = "showMobile" style ="display:none;">
            <p> some text and image <p>
          </div>

          <!-- this div block is intended to be shown in the browser and not shown in the mobile -->

          <div class="hideMobile">
            <p> some other text and image </p>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>

これは、iPhone メール アカウントでは正常に機能しますが、Gmail ブラウザや iPhone 用の Gmail アプリでは機能しません。ポインタはありますか？

4

2 に答える 2

2

正解display:noneです。Gmailで削除されます。これを回避する最善の方法は、インラインスタイルをに設定することfloat:left, width:0px, height:0px, visibility:none, overflow:hiddenです。メディアクエリの要件を満たしたら、これらのスタイルをすべて元に戻すので、メディアクエリ内で設定できますfloat:none !important, overflow:visible !important, width:(actual width or 100%) !important, height:(same as width) !important

于 2012-08-14T20:57:51.590 に答える
0

HTML メールの場合、現在行っている方法で CSS スタイルを使用しないことをお勧めします。

古い学校のテーブル ベースのレイアウトと古い (まだ有効な) html タグなどを使用する必要があります。

CS スタイルは最小限に抑え、インライン スタイルとしてのみ使用する必要があります。

于 2012-07-25T22:36:15.850 に答える