0

所定の期間ごとにメールで自動的に送信されるコンテンツ テーブル (ユーザーのスコア テーブル) があります。

html には、静的なテーブル サイズやその他の測定値の定義が、パーセントではなくピクセルで表示されていました。

私の iPhone と Chrome Web ブラウザではすべて問題ないように見えましたが、Android デバイスでは完全にバランスが取れていませんでした。

それらをパーセントに置き換えて、レスポンシブレイアウトに変換することにしました。これで問題は解決したようですが、PC とモバイル デバイスの幅と高さの比率の違いにより、スコア テーブルの幅を PC 画面とモバイル \ タブレット画面で異なるものにする必要があります。

@media ルールを使用してこれを実行できることはわかっていますが、問題は、CSS のこの機能はスタイル シート内でのみ使用でき、インライン形式の CSS (HTML 内) では使用できないことです。ご存じのとおり、ほとんどのメール クライアントでは、HTML メール内で CSS スタイル シート (クラス、CSS セレクター) を使用できません。

そのような状況で何をするようにアドバイスしますか?

どんな援助も大歓迎です。

4

2 に答える 2

1

ラルフが言ったことに付け加えると…

昨年の時点で、Gmail は最も人気のあるメール クライアントになり、メールからセクション全体を取り除いています。したがって、インラインを使用することは非常に重要です。

これは、さまざまな電子メール クライアントをターゲットにしている場合の非常に優れたリソースです http://www.campaignmonitor.com/css/

これらは、すべてのヘッド スタイル セクションに含まれているいくつかの役立つハックです。

<style>
/* Force Outlook to provide a "view in browser" button. */
body{ width:100% !important; height:100% !important; margin:0; padding:0; background-color: #f8f3eb;}
.ReadMsgBody{width:100%;} 
.ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
/* Reset Styles */
body{-webkit-text-size-adjust:none; -ms-text-size-adjust:none;} /* Prevent Webkit and Windows Mobile platforms from changing default font sizes. */
</style>
于 2013-06-09T17:17:54.153 に答える
1

ほとんどのメール クライアントでは、HTML メール内で CSS スタイル シート (クラス、CSS セレクター) を使用できません。

リンクされたスタイル シートではありませんが、styleのタグ内にスタイルを配置できますhead。はい、一部の電子メール クライアントはこれらのスタイルを取り除きますが、それを使用しない理由にはなりません。最近では、多くの電子メール クライアントも@mediaルールをサポートしています。ここには、さまざまな電子メール クライアントでサポートされているものとサポートされていないものについて、多くの適切なアドバイスがあります。(このサイトには、十分にテストされた見栄えの良い電子メール テンプレートも多数あります。)

一部の電子メール クライアントはドキュメントの head 内のスタイルをサポートしていないため、最も安全な方法はインライン スタイルを追加することです。@mediaただし、これは、スタイルを処理できるクライアントのヘッド セクションにスタイル (ルールなど) を配置することを妨げるものではありません。

于 2013-06-02T13:18:17.223 に答える