1

デスクトップで画像を非表示にし、モバイルで表示する必要があるメールを作成しています。これを行う唯一の方法は、gmail でサポートされていない display none を使用することです。

メディア クエリを使用してモバイル バージョンでメールのスタイルを設定できるように、デスクトップ バージョンで画像を非表示にする他の方法があるかどうか疑問に思っていました。

問題はGmailだけです

どうもありがとう

4

4 に答える 4

4

デスクトップ用のインライン スタイルで、画像のwidthとを作成します。次に、レスポンシブ メディアクエリ CSS を使用して、画像を適切なサイズに復元します。height0

編集: mso-hide:all;Outlook の問題を修正するために、インライン css にも追加してみてください。

于 2013-03-05T15:15:24.900 に答える
1

HTML メールの要素を非表示にして Gmail で機能させるには、要素をゼロにして CSS のサイズを調整する必要があります (Gmail は無視します)。

そのようです：

<style>
    @media only screen and (max-width: 480px) { 
    *[class~=show_on_mobile] {
        display : block !important;
        width : auto !important;
        max-height: inherit !important;
        overflow : visible !important;
        float : none !important;
    }
</style>
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <!--[if !mso]><!-->
        <td style="width: 0; max-height: 0; overflow: hidden; float: left;">
        </td>
    </tr>
    <!--<![endif]-->
</table>

さらに、追加された条件付きコメントは、Outlook 07 を対象としています。

于 2013-12-19T05:14:29.783 に答える
1

デスクトップのインライン スタイル:

style="max-height:0;width:0;"

レスポンシブ CSS @media クエリ:

max-height: none !important;
width: auto !important;

魅力のように動作します:)

于 2015-03-09T15:31:51.057 に答える
0

hiddenの有効な値ではありませんdisplay。

試す：

{
    display:none;
}

または、それでもうまくいかない場合は、次のことを試してください。

{
    visibility:hidden;
    width:0;
    height:0;
    padding:0;
    margin:0;
}
于 2013-03-05T13:26:34.180 に答える