HTMLをAndroidのメーラーで見るとレイアウトが崩れる

HTMLメールを作った時にAndroidでレイアウトが崩れるという現象に遭遇しました。
HTMLメールは中にテキストはほとんど無く、画像をスライスしてtable組みでぺたぺた貼り付けたもの。
状況としては、たくさん貼り付けてある画像の表示の割合がおかしくなってしまいます。
例えば、A、Bという画像があったとして、Aが100%のピクセル数で表示されているのに、Bが50%のサイズで表示されしまう。
当然、全部同じ倍率で表示されて初めてきれいになるように作っているわけなので、変に縮小されてしまうものがあると、でこぼこになってしまう。

PCではきちんと見えるし、iPhoneでは問題ないんですよね~。

結局原因としては、画像のサイズ指定をきちんと行っていないことでした。
スマホの画面サイズは特殊なので、もともと画像なんかは適度に縮小されたりして表示される仕様なのですが、width、heightの指定がきちんと入っていないと、Androidでは意図しないサイズで表示されてしまうようです。

きちっと数値の指定をすればきれいになりました。ヤレヤレ。

コメント