1. Dom
  2. Pytanie i odpowiedź
  3. Tabele o 100% szerokości nie działają w Gmailu. Android

Tabele o 100% szerokości nie działają w Gmailu. Android

2014-09-02 7 views
15

Próbuję utworzyć responsywny adres e-mail - w rzeczywistości działa on naprawdę świetnie, z wyjątkiem niewielkich elementów, które nie współpracują z Gmailem dla systemu Android.Tabele o 100% szerokości nie działają w Gmailu. Android

mam te poważnie proste, czarne paski, które siedzą w górnej części wiadomości e-mail jako element dekoracyjny:

<table width="100%" cellpadding="0" cellspacing="0" align="center" valign="top"> 
    <tr><td width="100%" height="11" bgcolor="#000000"></td></tr> 
    <tr><td width="100%" height="2" bgcolor="#FFFFFF"></td></tr> 
    <tr><td width="100%" height="1" bgcolor="#000000"></td></tr> 
    <tr><td width="100%" height="30" bgcolor="#FFFFFF"></td></tr> 
</table>

Jednak oni nie są wyświetlane jako coś więcej niż maleńkim skrawku czerni i bieli, który przypomina wyjątkowo cienki wykrzyknik w aplikacji Gmail na Androida.

Podobnie jest stopka, która nie jest obejmujących całą szerokość email:

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000"> 
    <tr> 
     <td> 

     <table width="650" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000"> 
      <tr> 
       <td align="right" class="footer"> 
        <img src="images/footer.png" /> 
       </td> 
      </tr> 
     </table> 

     </td> 
    </tr> 
</table>

Wszelkie sugestie jak zrobić te obejmują pełną szerokość e-mail?

Źródło

2014-09-02 nebulousecho

+2

@Fabio html5 pewnością nie jest obsługiwana w programach pocztowych. W przypadku e-maili niestety najlepszą praktyką jest użycie "poważnie przestarzałego" kodu. http://stackoverflow.com/questions/2935472/html-email-tables-or-divs – rds

+10

Jeśli nie znalazłeś rozwiązania wypróbuj style = "width: 100%! important" jak

... Pracuję nad tym problemem teraz. Gmail lubi rozbierać większość plików CSS, ale jeśli dodasz etykietę, ważne, że zachowają je przez większość czasu, udało mi się przekonać mój e-mail do wygenerowania 100% jako 1366 pikseli (mój rozmiar ekranu), ale pozostawia poziomy pasek przewijania. Jeśli znalazłem pełne rozwiązanie, opublikuję go tutaj.Lub jeśli to rozwiązałeś, chciałbym wiedzieć, widziałem to w innych e-mailach, więc jest to możliwe. – JoeyPhillips

+2

@JoeyPhillips To działało dla mnie! Zasługujesz na uznanie za poprawną odpowiedź. Klucz rzeczywiście dodaje! Ważny do deklaracji szerokości wewnątrz atrybutu stylu. Dziękuję za udostępnienie tego. –

Odpowiedz

39

Jeśli nie znaleźli rozwiązanie spróbować

style = "width:! 100% ważne" jak

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000" style="width:100%!important">

Gmail lubi się rozebrać większość CSS, ale jeśli dodać etykietę ! Ważne będzie je trzymać przez większość czasu.

Źródło

2014-09-26 20:09:06 JoeyPhillips

+1

To powinno być oznaczone jako właściwa odpowiedź! To był kolejny z tych irytujących problemów, których nie udało mi się prześledzić, ale to naprawia! –

+0

To frustruje mnie w zeszłym tygodniu. Życzę, aby Gmail rozwiązał ten problem! Dziękuję Ci! –

+0

Czy przestało działać? Gmail automatycznie zmienia rozmiar moich tabel na kliencie Androida, ale oferuje opcję wyłączenia automatycznej zmiany rozmiaru, która rozwiązuje problem ... – MatheusJardimB

0

Nie jestem zaznajomiony z robieniem klientów/stron/etc dla czegokolwiek, co nie jest przeznaczone na PC, więc nie jestem pewien, czy to zadziała, czy nie, ale spróbuj to zrobić.

<center> 
<h1 style="color:#888888;">Android Client Header</h1> 
<p>Demonstration</p> 
</center> 
<hr color="#000000" style="height:11px;"> 
<hr color="#FF0000" style="height:2px;"> 
<hr color="#000000" style="height:1px;"> 
<hr color="#FF0000" style="height:30px;"> 

<h3 style="color:#0070ff;">Content 1</h3> 
<p color="#808080">E-mail Here</p> 
<hr color="#000000"> 
<center> 
<h1 style="color:#db880f;text-size:10px;">Android Client Footer</h1> 
<p style="color:#888888;">Demonstration</p> 
</center>

Nawet jeśli straci „stół” funkcję elementu, to jest przykładowy przykład wymyśliłem, starając się mój najlepszy matchup ustawienia kolorów i rozmiarów dekoracji liniowych.

Źródło

2014-09-24 14:15:12

2

Po szeroko zakrojonych testach poniższe rozwiązanie będzie działało w przypadku problemów związanych z odstępem w pionie między wszystkimi klientami poczty e-mail (dostępne na stronie Litmus), w tym. Aplikacja Gmail na Andriod.

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100% !important;"> 
    <tr> 
     <td bgcolor="#00a0cc" height="25" style="background:#00a0cc;height:25px;line-height:0;font-size:0;">&nbsp;<br /></td> 
    </tr> 
</table>

Kluczowy punkt jest zastosowanie width:100% !important do stołu, nie będzie działać na nakładanie na td. Jest to również najlepsze rozwiązanie do zastępowania pionowych obrazów dystansowych.

Źródło

2015-02-17 04:10:39 Mark

11

więc przypomnieć, że Gmail 100% 100% oznacza, dodając min-width: 100% naszej <tabeli>.

source

Źródło

2015-09-25 09:32:57 insulaner

+0

Działa to w moim przypadku. Następnie możesz dodać min-width: 0 w zapytaniu o media, aby usunąć tę regułę dla klientów poczty e-mail obsługujących zapytania o media. – jarace87

+1

To był brakujący element mojego problemu! W mojej sprawie próbowałem utworzyć szablon e-mail o stałej szerokości, który zawsze miał 580 pikseli, ale Gmail zamieniłby go w tabelę szerokości płynów. Dodanie 'szerokość: 580px! Ważne; min-szerokość: 580px! Ważne;' było tym, czego potrzebował. Pozdrawiam! –

Powiązane problemy

 Powiązane problemy