PhoneGapでRetinaディスプレイに対応する

Cordova 2.0利用。ずっとシミュレータで動かしてたから気づかなかったけどRetinaディスプレイの解像度で画面を組んでみると横幅がうまく設定されず表示が大きくなってしまう。viewportでスケールをすべて0.5にすればいい感じで表示してくれたのだけど、他になんかあるだろうと調べたらフラグがちゃんとあった。

プロジェクトのResourcesフォルダ下にあるCordova.plistで設定されているEnableViewportScaleをYESにしてあげるといいようだ。

（追記）2012-09-03 11:35
自分で書いてるのにハマったので整理。

PhoneGap初期状態ではおそらくviewportを無視する状態になっている。なのでEnableViewportScaleを有効にすることで読み込みをしてくれる。viewportのデフォルトの横幅(width)は980pxになっているのでそのまま表示すると異様に小さい表示になる。iOSでdevice-widthを指定すると4Sであっても320pxを返すようだ。なので直接widthに640pxを指定してあげるとうまく表示できるか…というとそうでもなく横幅640pxのページの320px分が表示されるような状態になる。結局うまくできたviewportは以下になる。

<meta name="viewport" content="width=device-width, initial-scale=0.5,minimum-scale=0.5, maximum-scale=0.5, user-scalable=yes">

勘違いしていたのは640pxの横幅を指定していれば比率１で表示していてくれると思っていたことだ。実質iPhoneでは320pxの横幅しか表示されない。よってinitial-scaleで表示領域を２倍にして全体を固定してあげなければいけないということだ。

多分きっとそう。

（追記の追記）2012-09-03 13:09
widthにだけ直接解像度を指定してあげるだけで良い感じにしてくれるらしい。

<meta name="viewport" content="width=640px,user-scalable=yes">