Enchant.jsで沼にはまったところがあったので、ここにメモしておきます。
Enchant.jsをはじめとして、HTML5ベースに作ったWebアプリをスマホとかで全画面表示（ネイティブアプリっぽく表示）するとき、
metaタグでviewportとかの設定をすると思います。
ただ、このときに、ゲーム画面が全体にフィットしないという問題が起こりました。
スマホの解像度に合わせて作ったにも関わらず...
結構これで悩んだのですが、いろいろ試したり調べたりするうちに、「viewportで表示した際、innerHeightを取得すると、最初の一回
目はアドレスバーを考慮した数値が出てくる」ということがわかりました。
viewportでの表示の時と、普通のブラウザの時の表示で何が異なるかというと、主にアドレスバーの有無です。
ブラウザで表示した際のinnerHeightが500だったとします。
viewportで表示すると、アドレスバーがない分これより値が大きくなりそうですが、一回目の表示の際は500となることがわかりました。
で、その状態でリロードすると、innerHeightの値が500より大きい、すなわち、アドレスバーが消えた状態の高さが取得できました。
実際には、最初に読み込んでからしばらく時間が経ってからinnerHeightを取得すれば、正しい高さが取得できるようでしたので、次のような
コードを実装すればこの問題は解決できると思われます。
var game = new Core(540, 930);
var CenterMove = function (core) {
var scale = Math.min(window.innerWidth / core.width, window.innerHeight / core.height);
core.scale = scale;
var stage = document.getElementById('enchant-stage');
stage.style.position = 'absolute';
stage.style.top = (window.innerHeight - (core.height * core.scale)) / 2 + 'px';
stage.style.left = (window.innerWidth - (core.width * core.scale)) / 2 + 'px';
core._pageX = (window.innerWidth - (core.width * core.scale)) / 2;
core._pageY = (window.innerHeight - (core.height * core.scale)) / 2;
};
setTimeout(function () {
CenterMove(game);
}, 55);
最初にgameオブジェクトを作成します。
正しい高さを取得するため55ms後にCenterMove関数を呼び出します。
ここでは、縦、横においてそれぞれ、拡大縮小率を計算し値が小さいものを選んで、それをgameオブジェクトのスケールとします。
その後は、画面を中央に表示しています。
以上です。
