電子メールHTML/CSSデスクトップとモバイルイメージ

-2

デスクトップとモバイルのいずれかを表示しているときに、イメージのスワップに関する問題が発生しています。いくつかのプラットフォームでうまくいきましたが、Android Mobileや一部のバージョンのOutlookでは動作していないようです。助けてもらえますか？電子メールHTML/CSSデスクトップとモバイルイメージ

<style> 

.visible-mobile { 
    display: none !important; 
} 

@media (max-width: 489px) { 
    .visible-mobile { 
    display: inline !important; 
    } 

    .hidden-mobile { 
    display: none !important; 
    } 
} 

</style>

そして

<img src="https://thumb9.shutterstock.com/display_pic_with_logo/839950/117069988/stock-photo-dog-listening-with-big-ear-117069988.jpg" style="width: 100%; max-width: 600px; border: none; height: auto;" alt="houdini" class="visible-mobile"> 

<img src="https://thumb1.shutterstock.com/display_pic_with_logo/2997419/259670459/stock-photo-happy-dog-with-tongue-out-and-head-tilt-259670459.jpg" style="width: 100%; max-width: 600px; border: none; height: auto;" alt="houdini" class="hidden-mobile">

出典

2017-02-15 Chris

「機能していません」は専門用語ではありません。何が働いていないのですか？そのマークアップは問題を示していますか？ – Rob

[mcve] please .. –

電子メールのHTMLとCSSには、ひどいサポートと一貫性があります。メディアクエリは、最高でも長時間の撮影です。大切なことは、2010年にウェブ上で技術が「進歩した」とみなされていたならば、それは今日でも電子メールにはまだ残っていないと考えられます。 – ppajer

はあなたのコードが動作するコンテンツ。問題は、Outlookでメディアクエリーを呼び出そうとしていることです。これはサポートされていません。現在のところ、この種のHTML（Apple Mail、Outlook for Mac、iOS Mailなど）をサポートする電子メールクライアントはほとんどありません。

メールでは、ほぼすべてのCSSインラインを書く必要があります。

出典

2017-02-16 00:08:41 Jesse

仕事のための電子メールの開発者が多い人として、私はリトマスを十分に勧めることはできません。彼らは、さまざまな電子メールクライアントをテストするために多くの作業をします。 – Jesse

すべてのインラインCSSを行う必要はありません。 – scoopzilla

OutlookとGmailはどちらも、CSSを「」要素から削除します。ですから、あなたの電子メールがiOSメール以上のものに見えるようにしたいのであれば、そうです。 – Jesse

そのままクラス

<style> 

.visible-mobile {display: none !important;} 
.hidden-mobile{display:none !important;} /* new class added*/ 

@media screen and (max-width:489px){ 
    .visible-mobile { 
    display: block !important; 
/* change inline to block */ 
    } 

    .hidden-mobile { 
    display: none !important; 
    } 
} 

</style>

デスクトップ画像がまま、私が追加した

<img src="https://thumb9.shutterstock.com/display_pic_with_logo/839950/117069988/stock-photo-dog-listening-with-big-ear-117069988.jpg" style="width: 100%; max-width: 600px; border: none; height: auto;" alt="houdini" class="visible-mobile">

モバイルバージョンは見通しのための条件文を持っています。

上記の変更を加えます。あなたが効果的にOutlookのCSSのサポートを追加するために、これらの要素を追加すると組み合わせの要素の周りに<!--[if gte mso 9]>ラッパーを使用することができます

乾杯

出典

2017-02-16 01:24:27 Syfer

'@media'を' @media screenと（max-width：489px） 'に変更してみてください。 – scoopzilla

chris今すぐ動作するようにコードを更新しました。基本的に、モバイルイメージはOutlookから離れて表示されるはずです。 scoopzilla私は正しいメディアクエリも追加しました。 – Syfer

。それは完璧ではないし、Outlook 2010と2013はまだ問題がある。

この件に関するチュートリアルhereもあります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<meta property="og:title" content="*|MC:SUBJECT|*"> 
 
<title>*|MC:SUBJECT|*</title> 
 
<style type="text/css"> 
 
\t \t #outlook a{ 
 
\t \t \t padding:0; 
 
\t \t } 
 
\t \t .ReadMsgBody{ 
 
\t \t \t width:100%; 
 
\t \t } 
 
\t \t body{ 
 
\t \t \t width:100% !important; 
 
\t \t \t min-width:100%; 
 
\t \t \t -webkit-text-size-adjust:100%; 
 
\t \t \t -ms-text-size-adjust:100%; 
 
\t \t } 
 
\t \t .ExternalClass{ 
 
\t \t \t width:100%; 
 
\t \t } 
 
\t \t td{ 
 
\t \t \t border-collapse:collapse !important; 
 
\t \t } 
 
\t \t v*{ 
 
\t \t \t behavior:url(#default#VML); 
 
\t \t \t display:inline-block; 
 
\t \t } 
 
\t \t .ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{ 
 
\t \t \t line-height:100%; 
 
\t \t } 
 
    </style> 
 
    </head>

幸運！電子メールマーケティングは報われて悪いです。

出典

2017-02-16 20:01:10 scoopzilla

電子メールHTML/CSSデスクトップとモバイルイメージ

答えて

関連する問題