Androidサイトは横幅何pxで作ればいいのか？

Android

いくつかAndroidサイト制作の仕事をしていて、いろいろandroid機種でデバッグをして気づいたことがあります。

その中で一番はまったのが、「Androidサイトは横幅何pxで作ればいいのか？」という点です。

今では解決方法を見つけたので以下、まとめます。

Androidのデフォルト解像度について

Androidサイトを作る際、横幅何ピクセルで作ればいいのかなあと思い、Android機種の解像度一覧の表を探すと思います。

ただ、その情報を鵜呑みにしてサイトの横幅を設計すると、失敗することになるのです。

なぜなら、「機種自体の解像度性能は高くてもwebブラウザのデフォルトの解像度設定が低くなってるケースが多いから」、なのです。

たとえば、IS03は640*960という解像度を持ってますが、viewportでサイズを指定しないで表示したときの横幅は、320pxなんですね…。

androidはこの後書く理由でviewportでサイズを指定しないほうが無難なので、そうなってくると、320pxを基準にしたほうがいいのです。

Xperiaも同様で、デフォルトの横幅は320pxです。

ただし、IS01やLynxなどネットブックは、デフォルト横960pxです。縦表示にして回転させるには、オプション設定を変えないといけないのですが、縦表示可にすると、横幅480pxで表示します。

じゃ、サイトの横幅は何pxにすればいいの？

以上のことから、Androidサイトは最大横幅960pxにまで絶えられるように、基本320pxで作成するのをお勧めします。

かなり作り方が限定されてくると思いますが…

基本スタンスとしてはリキッドで幅が伸縮するようにすればよいでしょう。

もうひとつの方向性としては、320pxのboxをセンタリングして、背景を960px対応させるという手もあります。

なんで、viewportでサイズ指定しないほうがいいの？

iPhoneはviewportでサイズを指定することで、縦表示でも横表示でもその指定した幅で表示されます。

つまり、表示の倍率を自動で変えてくれる親切設計になっています。

ただし、Androidは勝手が違ってまして、「機種の向きを変えたときに、はじめ表示した向きの倍率で表示する」という癖というかバグがあるのです。

このために、Androidサイトでviewportでサイズ指定してしまうと、機種の向きを変えたときに倍率を変えないで表示してしまうため、表示が乱れるという結果に陥ってしまいます。

向きを変えても、画面内できれいに表示するには、320px基準で作る必要があるのです。

追記(2011/1/27)

みなさん、フィードバックありがとうございます。まさかこんなに注目されるとは。

では、もうひとつの情報として、上に書き漏れてしまったのですが、「そもそもXperiaはviewportでサイズ指定しても、無視される」というバグもあります。2.1にアップデートすれば直ると思いますが、アップデート手順が面倒だし、どれだけの人がアップデートしたのか疑問です。

つまり、v1.6のXperiaはviewportでどう設定しようが、横幅320pxで表示します。v2.1のAndroid（すべてではないかもしれませんが）は初回表示時のみviewportで設定した横幅で表示します。

v2.2の検証はまだやってないですが、手元にv2.2のDesireがあるのでやってみようかな…

ツイートする

Permalink | コメント(3) | 14:02