wise9/enchant.js

スマートフォンでゲーム領域を画面**にできない問題（Android iPhone）

Opened this issue · 3 comments

3panda commented

お世話になります。

173でご解説いただいた手法でゲームサイズを固定しております。

今回、当方で作成しておりますゲームの画面が横幅240px 縦幅320px
のため、ディスプレイサイズの大きな端末（AndroidやiPhone）で
**に配置できるようにCSSで調整を行いました。

その際、iPhone4（5やその他は未確認です）がブラウザの表示領域から
はみ出してしまう現象がおきております。

今回行った方法は、

enchant-stage をラップするためにdiv#stageを用意し

こちらを「margin: 0 auto;」で**寄せにしております。
通常のWebサイトコーディングでは簡単にできるやりかたですが
enchant.js（v0.62 0.5x共に）を読み込んでいる場合は上手くいきませんでした。

検証のHTMLはこのようになっております。
■html

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

○iPhoneで問題があったCSS
iPhoneで問題があったCSSは以下の通りです。


#stage {
    position: relative;
    width: 240px;
    background-color: #000;
    padding: 0;
    margin: 0 auto;
}

div#enchant-stage {
    width: 240px;
    height: 320px;

}

このようにするとiPhoneでは左に押しやられ半分くらいの表示
になってしまいます。
「#enchant-stage」で「margin: 0 auto;」としても同様の現象がおきます。

代わりに以下のようにするとiPhoneでは**に
調整されます。

○iPhoneで問題がおきないCSS

#stage {
    position: relative;
    width: 320px;
    background-color: #000;
    padding: 0;
}

div#enchant-stage {
    width: 240px;
    height: 320px;
    margin: 0 auto;
}

このようにするとiPhoneは**に寄せれます。
ラップしている「#stage 」を固定する事でiPhoneは**によせられる
ようなのですが、モニターサイズ320px以上のAndroidなどでは画面右に余白ができて
しまいます。

推測で失礼いしますがenchant.jsのソース内で
Retina Displayに対応するための処理がなされていた記憶が
ございます。

そちらが原因かと考えております。

ソーシャルゲームのアニメーション部分に利用する為
サイズの固定と**寄せがどうしても必要となります。

何か対応策がございましたらご教授いただけますと
幸いです。

ご確認、よろしくお願い致します。

■環境
iOS 6.1.2
iPhone4

enchant.js（v0.62 0.5x共に）

rtsan commented

iPhone 5 iOS 6.1にて
○iPhoneで問題があったCSS
1
○iPhoneで問題がおきないCSS
2

rtsan commented

現在のバージョンだと、enchant.ENV.RETINA_DISPLAYの判定の際にviewportを指定するmetaタグを書き換えまたは追加してしまいます。
上のスクリーンショットではwidth=320としていますが640に上書きされて表示されているようです。
enchant.jsの読み込み後にmetaタグを挿入することで任意のviewportを設定出来ます。

<script type="text/javascript" src="enchant.js"></script>
<meta name="viewport" content="width=320, user-scalable=no" />

表示位置がずれる問題については iPhone5 + iOS 6.1 では再現しなかったので、報告いただいたバージョンで追って確認します。

wise9 commented

@rtsan のコメントですでに解決していますので、 close します。