iPhoneに向けてのHTMLメール送信方法と32pxのズレ
- タイトルとURLをコピーする
- Tweet
社内のメール配信システムだと、
本番のメール配信タイミングでしかテストメールを送れないとのことで、
自分でHTMLメールをiPhoneに送って表示確認をしていました。
忘れないようにメモです!
Thunderbirdでの送信方法
「アカウント設定」→「編集とアドレス入力」→「HTML形式でメッセージを編集する」にチェック。
「新規メール作成」ウィンドウの「挿入」→「HTML」→「HTMLを挿入」ウィンドウ内に、HTMLをコピペ。
「オプション」→「送信形式」→「HTMLのみ」にチェックし送信。
ちなみに、 iPhoneかどうかは「i.softbank.jp」で判断してます。
iPhone向けHTMLメルマガに不自然な余白
320pxの画像は横幅いっぱいで表示されるのですが、
テキストはなぜか右側が32px空いてしまいます。。
調べてみてそれっぽいのがあったので試してみたのですがダメでした。
参考:NxWorld | iPhoneで特定のフォントサイズでできる謎の余白の対処法
それでいろいろ試してみて、
妥協案としてbodyにpadding10px指定して、
右側の隙間32pxだったのを、
両側の隙間10pxにしました。
body { padding:0 10px; }
なぜか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で制作。
- タイトルとURLをコピーする
- Tweet