enchant.jsで作ったゲームの右端が切れて端末幅いっぱいに表示できない問題

JavaScriptのゲーム開発エンジンenchant.jsをいまだに使っている人は少ないと思うが、わたしは使っている。

昔enchant.jsで作ったゲームを改良してiPhoneでプレイした。
Safariで開くと右端が切れて表示される。ホーム画面に追加しても右端が切れたままだった。

Safariで開いた時（右端が切れて表示される―ホーム画面に追加しても同じ）

enchant.jsで作ったゲームを端末幅いっぱいに表示させたいときは、以下の記述がindex.htmlに必要だ。

iPhoneの場合

<!-- for iPhone -->
<meta name="viewport" content="width=320,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" href="icon.png">
<!-- /for iPhone -->

上記設定後、Safariで開いた後、「ホーム画面に追加」を選択してアプリアイコンから開くときちんと端末幅いっぱいに表示されるようになる。

解説

設定要素を1行ずつ解説する。

• enchant.js標準の320ピクセル幅とする設定とピンチ操作で画面の拡大縮小をさせないための設定

<meta name="viewport" content="width=320,user-scalable=no">

• Web アプリケーションを端末の全画面モードで実行するという設定

<meta name="apple-mobile-web-app-capable" content="yes">

• Webアプリケーションのステータスバーの背景を透過させてスマホアプリっぽく表示する設定

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

• ホーム画面に追加したときに表示されるアイコン用の画像ファイルの設定（ファイル名は任意）

<link rel="apple-touch-icon" href="icon.png">

ちなみにmeta要素のapple-mobile-web-app-status-bar-styleを利用するには、apple-mobile-web-app-capableをyesの状態に設定をしておく必要がある。

Androidの場合

<!-- for Android -->
<meta name="viewport" content="width=320,user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" type="image/png" href="icon.png">
<!-- /for Android -->

解説

• enchant.js標準の320ピクセル幅とする設定とピンチ操作で画面の拡大縮小をさせないための設定

<meta name="viewport" content="width=320,user-scalable=no">

• Web アプリケーションを端末の全画面モードで実行するという設定

<meta name="mobile-web-app-capable" content="yes">

• ホーム画面に追加したときに表示されるアイコン用の画像ファイルの設定（ファイル名は任意）

<link rel="icon" type="image/png" href="icon.png">

参考

MetaExtensions - WHATWG Wiki

wiki.whatwg.org