Androidでの表示崩れがviewportの調整で解決した

Androidでの表示崩れに四苦八苦したので、メモ。

jQueryを使って画面幅いっぱいでスクロールするスライダーを設置しているPCサイトが、Androidで表示崩れ……。「overflow:hidden」が効かずにスライダーに設定している画像すべて表示されていることが、レイアウトがおかしなことになっている原因でした。

完全な解決策かどうかはわかりませんが、とりあえず表示崩れはなおりました。

※追記しましたが、完全な解決策にはなりませんでした。表示崩れという点では直りましたが、初期表示の倍率が機種によって異なってしまい、結局別手段をとりました。

viewportにtarget-densitydpi=device-dpiを設定

ウィンドウサイズによってJavascriptやCSSを切り替える方法を考えていたのですが、結果的にはmetaタグのviewportを調整、以下のソースを追加することでAndroidの表示がうまくいきました。

<meta name=”viewport” content=”width=device-width,target-densitydpi=device-dpi,initial-scale=0.6″ />

target-densitydpi」がAndroid向けにサイトを表示する際の解像度(dpi)を指定する属。「target-densitydpidevice-dpi」とすることでデバイスの解像度とサイトを表示する解像度が同じになるそうです。

initial-scale」は初期(表示時)の倍率を指定する属性です。1.0にしてみたら画面からはみ出たので、0.6としました。この無理矢理感がなんとも……。

ただ、これだとiPhoneでの表示がおかしくなるので、Androidで表示するときだけ上記のタグを追加するようにしなければいけません。

PHPでAndroidとそれ以外で振り分け

Androidとそれ以外で振り分けをするにあたり、以下の記事が参考になりました。

今回のケースは、WordPressで制作したPCサイト。PHPでの対応が可能だったので、参考になったというより、ほぼそのまま使わせていただきました。

PHPが使えない場合は、Javascriptで対応することになるのかなと思います。基本は同じ考え方ですよね。ユーザーエージェントを判別して振り分け、Androidの場合はviewportタグを出力する。まぁ、そういうケースに直面した時に考えます。

結論

結論、Androidはやっかいだ

原因の調査や対策を探して、いろいろなブログを見ていて、以下の記事を見つけたのですが、iPhoneよりもAndroidのほうがブラウザのバグがかなり多いみたいですね。

個人的にはIE6のほうがかわいく思えます。jQueryを使ったスライダーやライトボックスの動作で苦労することはありますが、IE6までフォローする制作案件はオーソドックスで難易度の高くないデザインやサイト構成が多いので。

今後はPCサイトでも検証対象にスマホを含むのが多くなるのかなと、今回対応していてふと思いました。Androidはデバイスだけではなく、機種依存も多いみたいなので、できれば避けたいんですがね。

※追記(2013/1/21)

上記の方法で基本的にレイアウト崩れはなくなったものの、機種によって表示がちょっと違います。結局、PHPでAndroidだけ振り分けて、別JS・CSSファイルを読み込む方法をとりました。

やっぱり、Android対応は難しい……。

公開:2013/01/18 | 更新:2016/06/17