Google Mail ignoriert Medienabfrage? - Erstellen Sie ein Handy-nur div

Ich versuche, eine <div> nur sichtbar auf dem Handy zu machen.Google Mail ignoriert Medienabfrage? - Erstellen Sie ein Handy-nur div

Im Inneren des <head> Tag habe ich:

<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>

Und im HTML:

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

ich eine Unmenge versucht haben (grob) unterschiedliche Wege, um diese, wie display: none; zu arbeiten, aber GMail scheint die Medienabfrage einfach zu ignorieren und zeigt die <div> unabhängig davon.

Gibt es einen Trick? Es funktioniert in meinem Outlook-Client.

Quelle

2016-07-11 Lee

vielleicht hilft dies http://stackoverflow.com/questions/22073083/gmail-responsive-email-media-queries-style-tag – jakob

können Sie versuchen, die folgenden:

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; 
    } 
}

Und wie in den verknüpften Antwort Stile in HTML-E-Mails erwähnt sollten Inline eingestellt werden.

Quelle

2016-07-11 10:59:03 thepio

Google Mail ignoriert Medienabfrage? - Erstellen Sie ein Handy-nur div

Antwort

Verwandte Themen