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はデバイスだけではなく、機種依存も多いみたいなので、できれば避けたいんですがね。