web-dev-qa-db-ja.com

100％幅のテーブルはGmailでは機能しませんAndroid

私はレスポンシブなメールを作成しようとしています。実際には、Android向けGmailで連携していない小さな部分を除いて、全体的にかなりうまく機能しています。

装飾的な要素として、メールの上部にある以下の非常にシンプルな黒のストライプがあります。

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

ただし、Gmail Androidアプリでは、極薄の感嘆符に似た白黒の小さなストリップ以上のものとしては表示されません。

同様に、メールの全幅に及んでいないフッターがあります。

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

これらをメールの全幅に広げる方法に関する提案はありますか？

androidhtmlemailresponsive-designgmail
15
nebulousecho

解決策が見つからない場合は、

style = "width：100％！important"のような

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

GmailはほとんどのCSSを削除するのが好きですが、ラベルを追加すると！importantはほとんどの場合それらを保持します。

42
JoePhillips

したがって、<table>にmin-width：100％を追加すると、100％は100％を意味することをGmailに思い出させます。

ソース

11
insulaner

広範なテストを行った後、次のようなソリューションは、すべての電子メールクライアント（Litmusで利用可能）での垂直間隔の問題に対して機能します。 Andriod上のGmailアプリ。

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

重要なポイントは、width:100% !importantをテーブルに適用すると、tdに適用しても機能しません。これは、垂直スペーサー画像を置き換えるための最良のソリューションでもあります。

2
Mark

私はPC用に設計されていないもののためにクライアント/サイト/その他を作ることに慣れていないので、これがうまくいくかどうかわかりませんが、これを試してください。

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

「テーブル」要素機能を失っても、これは私が思いついたサンプルの例であり、ライン装飾の色とサイズの設定を一致させるために最善を尽くしています。

0
user3799724