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;
    }
})();
もっとスマートな方法はあるでしょうが、とりあえずこれでひとまず解決です。