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