私は主にブラウザ上で動くゲームを作ってるんですが、そうなると問題になるのは画面の解像度です。
みんな、どういう解像度の端末を使ってるのか。
参考までに、上位 10 位までを順番に並べるとこんな感じです。
1920 x 1080
414 x 896
375 x 667
390 x 844
375 x 812
412 x 915
412 x 960
360 x 800
428 x 926
2560 x 1440
知りたいのは「最低何ピクセルあると想定して良いのか」という部分です。一番小さい端末に合わせれば、とりあえずそれ以上大きい端末はカバーできるので。
細かいデータは省略して、結論を言うとこうです。
横の解像度は最低 360px 確保すればＯＫ！
これで 99% はカバーできる！
ということで 360px です。今後はこれを基準にすることにします。
縦の解像度については単純に端末の解像度だけで見てしまうのはダメで、アドレスバーやナビゲーション部分等を差し引いて考える必要があります。調べたら、上下合わせて 119px を差し引く必要がありました。
で、差し引いた結論はこうです。
縦の解像度は最低 548px 確保すればＯＫ！
これで 99% はカバーできる！
ということで、縦横合わせると 360px × 548px が正解の数字、となります。これで 99% カバーできるのでよしとしましょう。
※ 当然ですが、サイトに来る人の傾向によって偏りはあるので、あくまで私のサイトに訪れる人を基準にした場合となります。ご了承を。
と思っていろいろ調べたんですが、少なくとも iPhone の場合、JavaScript からアドレスバーを隠すことはできない、ということでした。
確かにこの方法だと画面をフルに使えるため、解像度の制約がかなり解消されるんですが、わざわざホーム画面にリンクを置いてくれる人がそうそういるとも思えないので、やっぱり 548px が限界、という結論になります。
個人的に 16px × 16px をベースにしてゲームを作ることが多いので、そのためのメモになります
16px = 1 character となります
「この拡大率にしたときに、何キャラ分表示できるか」という情報を書いています
22.5 x 33.25 character
拡大率 1 倍の場合、スマホで見たときにはキャラが小さすぎてまともに遊べないため、「全体マップを確認」というような用途でのみ使う感じですね。
11.25 x 16.625 character
拡大率 2 倍は「キャラクターを識別できなくはないけど、目が疲れて長時間遊ぶにはつらい」という感じです。
9 x 13.3 character
拡大率 2.5 倍がちょうど良い大きさ、という感じがします。特に理由がなければこの拡大率でゲームを作ろうと思ってます。
7.5 x 11.08 character
拡大率 3 倍はちょっとキャラが大きくなりすぎる、という感じですね。目は疲れないです。