Ys' Library | プログラミング・ガジェット徒然日記: 6月 2012

2012年6月27日水曜日

[enchant-js] iPhoneで画面幅からページがはみ出てしまう場合の対処方法

Android/iPhone向けのゲームをenchant.jsで作っていた時にハマったのでメモ。

enchant.jsは自前でviewportを設定し、iPhone4のRetina対応をしようとします。

しかし、ページのサイズを固定したかったり、ページの一部だけをenchant.jsで作りたい時はこの設定が邪魔になります。

私の場合は

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />

とhtmlで指定していたにもかかわらず、iPhone上で画面サイズが大きくなりすぎてしまい一日くらい悩みました。
htmlの各要素のサイズは320pxからはみ出てないのに、なぜiPhoneだけ横スクロールしてしまうのか、と。

そこで、強引ではありますがenchant.jsのviewportを設定している部分をコメントアウトして対応しました。こんな感じです。

// enchant.js line 144
var RETINA_DISPLAY = (function() {
    if (navigator.userAgent.indexOf('iPhone') != -1 && window.devicePixelRatio == 2) {
        var viewport = document.querySelector('meta[name="viewport"]');
        if (viewport == null) {
            viewport = document.createElement('meta');
            document.head.appendChild(viewport);
        }
     //↓これをコメントアウト。 viewportはhtml上で設定しているため不要
        //viewport.setAttribute('content', 'width=640px');
        return true;
    } else {
        return false;
    }
})();

もっとスマートな方法はあるでしょうが、とりあえずこれでひとまず解決です。

2012年6月5日火曜日

enchant.jsで画面を自動拡大しない方法

enchant.jsでは画面サイズいっぱいにゲーム領域を表示するのが標準の動作です。
しかし、固定サイズでゲーム領域を表示し、残った部分に普通のHTML要素を表示したい、ということもあるかと思います。
そんな時はhtmlに下記のように記述すればOKです。

<body>
    <div id="enchant-stage">
    </div>

    <!-- ↓任意のhtml -->

</body>

通常はenchant.jsが自動で生成するidが「enchant-stage」のタグを先に書いておくと、コードで指定した通りの大きさでゲーム領域が表示されます。