AndroidのGmailアプリでHTMLメルマガのレイアウトが崩れる

HTMLメールを作っていた時、AndroidのGmailアプリでレイアウトが崩れるという現象が起きました。
tableでスライス画像を並べていたのですが、画像の縮尺が適切にならず、一部は他より大きくなり、一部は他より小さくなってしまいました。

図で説明するとこんな感じ。
↓こういう風にしたいのに、



↓こういう風になってしまう。



上の図のように、すべての画像が同じ縮尺で縮小表示されれば問題ないのですが、実際は下の図の様になってしまうのです。
いろいろ現象を調べてみると、次の様なことが分かりました。

図の、黄色、水色、青の画像はピクセル等倍で表示されている
図の赤の画像の横幅は、全体の横幅指定-(黄色の横幅+水色の横幅)になっている。
Gmailのメニューを表示して「自動サイズ変更を戻す」を実行すると、正しい縮尺になる。


予想なのですが、何らかの原因で「自動サイズ変更」という機能がオンになり、小さい画像からピクセル等倍で表示され、表示しきれなくなったものは小さくする、ということになっているようです。

で、根本的な解決策で無いのですが、この現象(自動サイズ調整)をオンにしない方法を見つけました。
それは、メルマガの横幅の、半分のサイズの画像を並べたtableを入れる、です。

今回私が作っていたメルマガの横幅は600ピクセルだったので、300ピクセル×1ピクセルのスペーサーをつくり、それを横に並べた1行2列のtableをメルマガ内に挿入したところ、自動サイズ変更がオンにならずレイアウトが崩れませんでした。

不思議な仕様、としか言いようが無いですけど、とりあえず裏技的に解決できたと言うことで良かった良かった。

コメント

このブログの人気の投稿

FacebookアプリのSMSアップデートの通知をオフにする

子どもがマイクラPEで、友だちとオンラインマルチプレイをやりたいと言い出したときの話。

Adobe Photoshop CS6の自動保存機能のファイル保存場所