[Enchant.js]スマホで全画面表示した際、Viewportのサイズに画面を合わせる方法

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オブジェクトのスケールとします。

その後は、画面を中央に表示しています。

以上です。