GMail ignoruje " Wyświetlacz: Brak"

Dla tych, którzy docierają tutaj z podobnym problemem związanym z rozwojem poczty mobilnej/stacjonarnej w Gmailu - jeśli używasz zapytań o media i pokazujesz / ukrywasz zawartość, osadzony css nie będzie w stanie nadpisać wbudowanej linii !ważna deklaracja. Zamiast tego możesz użyć overflow: hidden, w ten sposób:

<div class="mobile" style="width:0; overflow:hidden;float:left; display:none"></div>

W zapytaniach o osadzone media w naturalny sposób cofniesz te style, aby ujawnić div, a następnie ukryć zawartość w wersji desktopowej.

@media only screen and (max-width: 480px) {
 .mobile {
  display : block !important;
  width : auto !important;
  overflow : visible !important;
  float : none !important;
 }
 .desktop {
  display : none !important;
 }
}

Niestety właściwość height nie działa w Gmailu, w przeciwnym razie byłoby to lepsze rozwiązanie, biorąc pod uwagę, że tworzy to sekcję białych znaków poniżej widocznej zawartości równą wysokości div.

Chociaż to już zostało rozwiązane, pomyślałem, że wezmę się za rozwiązanie, które naprawdę działa dla mnie, na wypadek, gdyby ktoś miał ten problem w przyszłości. To naprawdę połączenie powyższych odpowiedzi i czegoś innego, co znalazłem w Internecie.

Problem, który miałem był dla Gmail i Outlook. Jak na OP, zawartość mobilna miałem nie ukryć w Gmail (Explorer, Firefox i Chrome) lub Outlook (2007,2010 & 2013). Rozwiązałem to za pomocą poniższego kodu.

Oto moja zawartość mobilna:

<!--[if !mso 9]><!-->
<tr>
  <td style="padding-bottom:20px;" id="mobile">
    <div id="gmail" style="display:none;width:0;overflow:hidden;float:left;max-height:0;">
  <table cellspacing="0" cellpadding="0" border="0">
    <tr>
      <td>
    <img src="imageurl" style="border:0;display:block;width:100%;max-height:391px;" />
          </td>
    </tr>
    <tr>
          <td style="border-left-style:solid;border-left-width:1px;border-left-color:#d5e1eb;border-right-style:solid;border-right-width:1px;border-right-color:#d5e1eb;background:#f7fafd;padding-top:15px;padding-bottom:15px;font-family:Arial,Helvetica,sans-serif;font-size:22px;color:#1c1651;padding-left:10px;padding-right:10px;text-align:left;" id="mobiletext" align="left">We're now on Twitter</td>
    </tr>
    <tr>
      <td style="border-left-style:solid;border-left-width:1px;border-left-color:#d5e1eb;border-right-style:solid;border-right-width:1px;border-right-color:#d5e1eb;background:#f7fafd;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#585858;padding-left:10px;padding-right:10px;text-align:left;line-height:24px;" id="mobiletext"><a href="#" style="text-decoration:none;color:#0068ca;">Follow us now</a> for some more info.
      </td>
    </tr>
    <tr>
      <td>
        <img src="imageurl" style="border:0;display:block;width:100%;max-height:37px;" />
          </td>
    </tr>                               
  </table>  
    </div>
  </td>
</tr>
<!--<![endif]-->

A tu CSS:

@media only screen and (min-width:300px) and (max-width: 500px) { /* MOBILE CODE */
*[id=mobile] {
    width:300px!important;
    height:auto!important;
    display:block!important;
    overflow:visible!important;
    line-height:100%!important;
  }
*[id=gmail] {  
    display:block!important;
    width:auto!important;
    overflow:visible!important;
    float:none !important;
    height:inherit!important;
    max-height:inherit!important;
  }

Poprawki dla programu Outlook

Więc jak widać z kodu HTML powyżej, owijanie całej zawartości w tych znacznikach;

<!--[if !mso 9]><!--> <!--<![endif]-->,

Ukrywa zawartość dla wersji programu Outlook, o których wspomniałem. Dla wszystkich innych klientów poczty, display:none; działa dobrze. Widziałem również, że można również użyć mso-hide:all, Aby ukryć rzeczy dla Outlooka, ale myślałem, że to trochę łatwiejsze niż umieszczając ten kod w linii.

Poprawki dla Gmaila

Teraz w Gmailu widać, że stworzyłem "specjalny" id o nazwie gmail, który następnie zastosowałem do div w <td>. Próbowałem niezliczonych innych metod używania rzeczy, takich jak overflow:hidden inline i wszelkiego rodzaju inne kombinacje, ale to mi się udało.

Więc w skrócie, owijanie zawartości w <td> w <div>, która następnie zawiera overflow:hidden,width:0 itd., a następnie nadpisywanie tych stylów, dając div id, w moim przypadku gmail rozwiązał problem za mnie.

W każdym razie, może ktoś znajdzie to pomocne w przyszłości!

Użycie display:none !important; rozwiązuje problem z Gmailem, ale jest on ignorowany przez Outlooki 2007 i 2010. Got round this using display:none; display:none !important; W ten sposób gmail korzysta z jednej wersji, A Outlook 2007 i 2010 z drugiej.

Zostało już powiedziane display:none !important; działa, ale nikt nie podał przykładu użycia, więc dam jeden, nad którym pracowałem, gdy znalazłem to pytanie i rozwiązanie na tak.

Tworzyłem wieloczęściowy e-mail z prostym / tekstem i html. W źródle html jest generowany z plików szablonów, a zwykły tekst jest tworzony z usuwania znaczników z pełnej wiadomości e-mail.

Aby dodać dodatkowy tekst do zwykłego tekstu, który nie jest wyświetlany w html, najprostszym sposobem jest zawinięcie go w <div style="display:none !important>, które zostanie usunięty po wygenerowaniu zwykłego tekstu. Na przykład, jeśli jest to Twój szablon:

<p>This is part of an html message template.</p>
<div style="display:none !important">=================================</div>
<div style="border-top:3px solid black;margin-top:1em;">
   <p>This is some footer text below a black line</p>
</div>

HTML będzie renderowany zgodnie z oczekiwaniami (bez wiązki ='s), a zwykły tekst ze wszystkimi div' ami będzie wyglądał następująco:

This is part of an html message template.
=========================================
This is some footer text below a black line.

Usuń element z kodu źródłowego całkowicie.

Klienci poczty E-Mail są bardzo surowi w odniesieniu do niektórych reguł CSS. Ponadto, ponieważ nie można wykonać JavaScript wewnątrz E-maila, display: none nie ma tam żadnej funkcji, prawda?

Dzięki za to, bardzo pomocne dla mnie.

Spróbuj max-height dla Gmaila to powinno go podnieść. następnie użyj max-height: inherit !ważne; w CSS powinno to usunąć problem z odstępami:

<div class="mobile" style="display:none; width:0px; max-height:0px; overflow:hidden;">

@media only screen and (max-width: 480px) {
.mobile {
display:block !important;
margin: 0;
padding:0;
overflow : visible !important;
width:auto !important;
max-height:inherit !important;
}
}

Aby ukryć element w e-mailu HTML i mieć go działającego w Gmailu, musisz go zerować i dostosować rozmiar w CSS (który Gmail zignoruje).

Like so:

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

Dodatkowo dodany komentarz warunkowy dotyczy programu Outlook 07.

Mam sytuację, w której miałem tylko kilka słów. Użyłem font-size: 0px;.

<div style="font-size:0px">foo bar</div>

Bazując na Dan S., innym przykładzie, z którego często korzystam.

@media only screen and (max-width: 480px) and (min-device-width: 320px) and (max-device-width: 480px) {
  p[class="hidden"] { /* I use this format to get past Yahoo Mail */
    display: block !important;
    visibility: visible !important;
    max-height: none !important;
  }
}

<td>
  <p class="hidden" style="display:none;visibility:hidden;max-height:0px;">You can't see me.</p>
</td>

Z wielką przyjemnością chciałbym podzielić się tą wiadomością ze wszystkimi, że gmail obsługuje teraz właściwość CSS "display: none" podczas testowania przez EmailMonks. Ale musisz zastosować klasę z CSS podczas korzystania z 'display: none', aby być nietkniętym przez narzędzie inlining.

Możesz przeczytać więcej tutaj

Jeśli masz problemy z Gmailem, poprawka podana w numerze trzecim również zadziałała dla mnie. Zastosowałem podobne podejście, używając znaczników div I nadpisań w linii, a następnie definiując styl CSS w tagu head specyficznym dla Gmaila. Za każdym razem, że chcę ukryć coś z pulpitu programu outlook robię następujące: jeśli !mso. Zobacz przykład poniżej:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>

    <style type="text/css">
    So my code looks like this: 
    @media screen and (max-width : 480px) { div[id=gmail] {display:block!important;
        width:100%!important;
        overflow:visible!important;
        float:none !important;
        height:inherit!important;
        max-height:inherit!important;}
    }
    </style>
    <title></title>
    </head>
    <body>

<!--And the in the i have the following setting inline-->
<table>
<tr>
<td>
<div id="gmail" style=
"display:none;width:0;overflow:hidden;float:left;max-height:0;">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#E9E9E8"
align="center"><![if !mso]>
<tr>
<td valign="top">
<table width="133" bgcolor="#FFFFFF" style=
"border: 1px solid #c6c6c5;" cellpadding="0" cellspacing="0">
<!--My content--></table>
</td>
</tr>
<![endif]></table>
</div>
</td>
<!--This worked for me in Android 4.2 /4.1 /apple iOS
desktop web based: gmail, yahoo, Aol, Outlook.com in IE / FF and Chrome
desktop: outlook 2010--></tr>
</table>
</body>
</html>