Gmailはメディアクエリを無視していますか？ - モバイル専用部門を作成する

<div>をモバイルでのみ表示しようとしています。Gmailはメディアクエリを無視していますか？ - モバイル専用部門を作成する

<style> 

@media only screen and (min-device-width: 481px) { 
    div[class="mobile-only"] { 
    height: 0px !important; 
    overflow: hidden !important; 
    } 
} 

@media only screen and (max-device-width: 480px) { 
    div[class="mobile-only"] { 
    height: auto !important; 
    overflow: auto !important; 
} 

</style>

そしてHTMLで：：私が持っている<head>タグ内

私は、このようなdisplay: none;としての仕事にこれを取得する（おおよそ）異なる方法、無数を試してみました

<div class="mobile-only"> 
    <table...> 
</div>

が、 GMailはちょうどメディアのクエリを完全に無視し、<div>を表示しているようです。

このトリックはありますか？私のOutlookクライアントで動作します。

出典

2016-07-11 Lee

多分これが役立ちますhttp://stackoverflow.com/questions/22073083/gmail-responsive-email-media-queries-style-tag – jakob

あなたは次のことを試すことができます。

HTML：

<div class="mobile-only" style="overflow:hidden; float:left; display:none; line-height:0px;"><br/>This is hidden on desktop!</div>

CSS：

@media only screen and (max-device-width: 480px) { 
    *[class="mobile-only"] { 
    overflow: visible !important; 
    float: none !important; 
    display: block !important; 
    line-height:100% !important; 
    } 
}

とHTMLメールにリンクされた回答のスタイルで述べたようにインラインで設定する必要があります。

出典

2016-07-11 10:59:03 thepio

Gmailはメディアクエリを無視していますか？ - モバイル専用部門を作成する

答えて

関連する問題