モバイル向けのデバイス対応メールを作成しています。この一環として、デスクトップ/ウェブメールに表示される一部の画像をモバイルで非表示にしたり、その逆を行ったりする必要があります。
テストしたすべてのWebクライアントとモバイルデバイスで動作しますが、Outlookはファイル内のすべての画像を表示します。
display：none;の組み合わせを試しました。、可視性; 画像、tds、テーブルで非表示になり、width = "0"になり、divでも試してみました。
代わりに背景画像を使用することで回避策があることは知っていますが、一部の画像はボタンとして機能し、その背後にリンクが必要なため、理想的ではありません。
助けていただければ幸いです、
ありがとう。
シャロン
返信ありがとうございます、私は今それを修正することができました。マットの言ったことは正しかったと思います。私の問題は、インライン スタイルに関係していました。
2 つの異なるサイズの画像が必要で、両方をリンクとしてクリックできるようにするという同じ問題がありました。
私のメディア クエリはモバイル デバイスのみを対象としているため、含まれているテーブル セルの高さを定義し、リンクが設定されたブロックの高さであることを確認できます。
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
td[class="image-class"],
a[class="image-link-class"]{
height:165px!important;
display: block; !important};
img[class="desktop-content"]{
display: none !important;
height:0 !important;
min-height: 0 !important;
max-height: 0 !important; width:0 !important; overflow: hidden !important;
}
画像には、バズーカですべてを 0 にして、実際に非表示にするクラスがあります。デスクトップ ベースの電子メール クライアントの場合、テーブル セルの背景画像は表示されず、インライン画像で覆われます。
<td height="473" background="image-mobile.jpg" class="image-class"><a href="#" class="image-link-class"><img src="image-desktop.jpg" width="318" height="473" border="0" alt="" style="display:block" class="desktop-content"></a></td>