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

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

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



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



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

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


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

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

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

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

コメント