さくペラスマートフォン用の表示で見るさくペラさくっとぺらいちというサイトのつづきこの広告は、90日以上更新していないブログに表示しています。2011-01-26Androidサイトは横幅何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で設定した横幅で表示します。(317)月別アーカイブリンクヘルプはてなブログお知らせはてなブログをはじめよう!acidgraphixさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。