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