1

Stack Overflowユーザーは通常、HTMLニュースレターをHTMLテーブルとインラインスタイルで構成して、できるだけ多くの電子メールクライアントがコードを処理できるようにする必要があることに同意しています。ただし、画像やアンカー、テキスト装飾や境界線などのプロパティを含む一部のタグは、さまざまな電子メールクライアントに応じて一貫性のないレンダリングを行います。

すべての電子メールクライアントがコードを正しく読み取れるようにするために、HTMLニュースレターでどのタグ、属性、およびプロパティを使用する必要があり、回避する必要がありますか？MailChimpは、css、ids、およびクラスを使用してテンプレートを作成します。しかし、たとえばGmailはほとんどのCSSをクリップします。これが私の現在のコードのスプラッシュです：

<!doctype html><html lang="en" dir="ltr">
<head>
  <meta http-equiv="content-type" charset="utf-8">
  <title>Twinkies maker threatens to liquidate</title>
  <meta content="Hostess Brands says if its striking bakers don't return to work today, it will liquidate the entire company." name="description">
  <link rel="image_src" href="http://www.mysite.com/i/logo.jpg">
  <style type="text/css">
  @media only screen and (max-width:480px){
    *[class~=stackonmobile]{width:100%!important;margin:0;display:block!important;clear:both!important}
    *[class~=hideonmobile]{display:none!important}
  }
  </style>
</head>
<body style="font-family:arial,sans-serif;color:#222;text-align:left;background-color:#fff;background:url(http://www.mysite.com/i/background.jpg) repeat-x;margin:0;padding:0"><center>

  <table cellspacing="0" cellpadding="0" border="0" style="border-spacing:0;max-width:640px;text-align:left;margin:auto">
    <tr>
      <!-- following td is included for message preview only -->
      <td style="height:0;font-size:0;color:#ffffff;text-indent:-9999px">Hostess Brands says if its striking bakers don't return to work today, it will liquidate the entire company.</td>
      <!-- // -->
    </tr>
    <tr><td align="left" style="float:left;text-align:left;vertical-align:middle"><a href="http://www.mysite.com/" style="color:#b12124;text-decoration:none"><img src="http://mysite.com/i/header-logo-on-top-of-background-image.png" width="100" height="41" border="0"></a></td><td align="right" style="height:16px;float:right;text-align:right;font-size:16px;line-height:16px;font-family:georgia,serif;color:#ffffff;font-style:italic;padding-top:10px">January 27, 2013</td></tr>

    <tr><td colspan="2" style="width:620px;padding-left:10px;padding-right:10px"><div style="height:5px;clear:both;margin-top:0;margin-bottom:14px;background:transparent url(http://www.mysite.com/i/1px-by-1px-white-spacer.jpg) repeat"></div></td></tr>

    <tr><td colspan="2" style="padding-left:20px;padding-right:20px">
    ...

ここであなたが違うことをする何かを見ますか？

4

1 に答える 1

2

GmailはほとんどのCSSをクリップしません、それは他の電子メールクライアントと非常に匹敵するサポートを持っています。問題は、ヘッドタグとスタイルタグが削除されることです。このため、メディアクエリ（レスポンシブメールデザイン）はGmailでは機能しません。これは、メディアクエリをインライン化できないためです。

私はあなたのコードをデバッグしていませんが、レスポンシブなテクニックには良さそうです。透明な背景セットがあり、一貫して機能しないことに気づきました。すべての透明度に.pngを使用してください。背景画像が必要な場合は、これを使用してください。また、何かをフロートさせようとしない限り、テーブル内でdivを使用することはありません。

Gmailで機能する別の方法は、max-widthの流動的なテンプレートです。デスクトップの場合、600px（または設定したもの）のように見え、それ以下の場合は、すべての主要な電子メールクライアントで100％の画面幅になります。

電子メールクライアントでのCSSサポートのベストリファレンス：http：//www.campaignmonitor.com/css/

于 2013-01-28T14:07:10.560 に答える