iPhoneに向けてのHTMLメール送信方法と32pxのズレ

社内のメール配信システムだと、
本番のメール配信タイミングでしかテストメールを送れないとのことで、
自分でHTMLメールをiPhoneに送って表示確認をしていました。

忘れないようにメモです!

Thunderbirdでの送信方法

「アカウント設定」→「編集とアドレス入力」→「HTML形式でメッセージを編集する」にチェック。

説明キャプチャ01

「新規メール作成」ウィンドウの「挿入」→「HTML」→「HTMLを挿入」ウィンドウ内に、HTMLをコピペ。

説明キャプチャ02

「オプション」→「送信形式」→「HTMLのみ」にチェックし送信。

説明キャプチャ03

ちなみに、 iPhoneかどうかは「i.softbank.jp」で判断してます。

iPhone向けHTMLメルマガに不自然な余白

320pxの画像は横幅いっぱいで表示されるのですが、
テキストはなぜか右側が32px空いてしまいます。。

調べてみてそれっぽいのがあったので試してみたのですがダメでした。

参考:NxWorld | iPhoneで特定のフォントサイズでできる謎の余白の対処法

それでいろいろ試してみて、
妥協案としてbodyにpadding10px指定して、
右側の隙間32pxだったのを、
両側の隙間10pxに
しました。

body {
	padding:0 10px;
}

iPhoneのズレイメージ

なぜか10pxより小さい値だと右側が32px空いてしまいました。

だれか原因、対策など
分かる方がいたら教えていただけるとうれしいです。

iPhoneのフリーPSD:Photoshop VIP | 商用可、iPhone 4Sを完全再現する無料PSD素材セット2個まとめ

iPhone向けHTMLメール コーディングメモ

<meta name="viewport" content="device-width, initial-scale=1.0">

・画面サイズに合わせて、1倍で表示

<meta name="format-detection" content="telephone=no">

・数字をリンクさせない。

・文字コードが「iso-2022-jp」でも「utf-8」でも、右の余白は変化無かった。

・Retinaディスプレイのため、画像の横幅を320pxではなく、倍の640pxで制作。

この記事に関連する記事

コメントをどうぞ