ブラウザとモバイル プラットフォームで表示されるように電子メールをレイアウトしていますが、ほとんどすべてがうまくいっています。インライン スタイルなどを使用してテーブルに配置されています。ただし、最大幅 600 ピクセルの効果を持つメディア クエリにもかかわらず、少なくとも私と私がアクセスできる他の 1 つの Android の Gmail アプリは、画像のサイズを変更することを選択しています。メディアクエリを使用したり、通常はウィンドウに収まるようにする代わりに、その領域に収まるようにレイアウトします。どちらでも問題ありません。
個人的には、携帯電話で「自動サイズ変更をオフにする」ことができ、メールはブラウザと同じようにレイアウトされます。
メール サイズから自動サイズ変更しないように Gmail アプリに指示するか、代わりにメディア クエリを使用するように指示する手段はありますか?
Google が行うように (原文のまま!)ここ<body>では、テンプレートの上、タグの直後に小さなハックを追加する必要があります。
<!-- Gmail hack -->
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff; line-height:0; width:600px !important; min-width:600px !important; max-width:600px !important;"> </div>
<!-- /Gmail hack -->
Gmail と Inbox は を無視するためdisplay:none、ハッキングはこれら 2 つのクライアントのみに影響します。
css-tricks.comに触発されたこのコード ブロックは、私の問題を解決しました。の直前に配置し</body>ます。
<table class="gmail-app-fix">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="600">
<tr>
<td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
<img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
</td>
<td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
<img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
</td>
<td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
<img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
(Android 5.0.1、解像度 720x1280 (縦向きと横向きの両方で動作) 上の Gmail 6.0 および Inbox 1.20 でテスト済み)。