2

顧客が電子メールを開いているデバイスに基づいて、電子メール ニュースレターのコンテンツを表示/非表示にする方法を探しています。

現在、head セクションに次のコード スニペットがあります。

    @media only screen and (max-width: 480px) {
  #mobile { display: block; }  /* show it on small screens */
#normal { display: none; }   /* hide it elsewhere */
}

@media only screen and (min-width: 481px) {
  #mobile { display: none; }   /* hide it elsewhere */
  #normal { display: block; }  /* show it on large screens */
}

一緒に：

<div id="mobile">content</div> or <div id="normal">content1<div>

Web で使用している場合、これは問題なく動作します。ブラウザ ウィンドウを拡大縮小して、ウィンドウの幅に基づいてコンテンツを表示または非表示にできますが、電子メール システムを介してテストを送信するとすぐに、モバイルでは問題なく動作しますが、機能しません。デスクトップ (Gmail) で。

これはメールなので JavaScript を使用できないため、すべて html/css である必要があります。

私が間違っていることや欠けていることはありますか？

4

1 に答える 1

1

あなたの痛みが分かります。HTML 形式のメール ニュースレターのコンテンツを表示したり隠したりすることは、何年も前からできませんでした。

/* Hide on Desktop */

.hide-desktop { 
    /* non-gmail */
    display: none; 

    /* gmail */
    font-size: 0; 
    max-height: 0; 
    line-height: 0; 

    /* outlook */
    mso-hide: all;

    /* optional, required only if you're using padding */
    padding: 0; 

}
@media (max-width: 480px) {
    .hide-desktop {
        display: block !important;
        font-size: 12px !important;
        max-height: none !important;
        line-height: 1.5 !important;
    }
}


/* Hide on Mobile */

@media (max-width: 480px) {
    .hide-mobile {
        display: none;
        max-height: 0; 
    }
}

注.hide-desktop:メディア クエリの外側にあるルールをインライン化することを忘れないでください。

したがって、メディア クエリといくつかのハックを使用して、デスクトップに対して強気の非表示を実行し、メディア クエリを元に戻すことができます。逆に、モバイル クライアントはメディア クエリを適切にサポートしているため、メディア クエリだけでモバイル コンテンツを非表示にすることができます。外れ値の gmail は、デスクトップ ビューを取得するだけです。これは残念ですが、それでも使用可能です。

于 2015-03-26T22:18:15.183 に答える