PhoneGap + jQueryMobile + iOS7 のステータスバー問題をCSSで解決する

PhoneGapとjQueryMobileで作ったアプリをiOS7で動かすと、ステータスバーとヘッダが重なってしまう。こんな感じ。



ちょっとこれを解決してみる。



通常はiOSとバージョン見て、「7以上ならbodyのマージン20pxにする」事で解決できるみたいだけど。

function onDeviceReady() {
    if ( window.device.platform === 'iOS' && parseFloat(window.device.version) >= 7.0 ) {
          document.body.style.marginTop = "20px";
    }
}
document.addEventListener('deviceready', onDeviceReady, false);

jQueryMobileだとページ描画が独自なので、こんな感じでヘッダー部分のマージンを適用させないといけない。

function onDeviceReady() {
    if ( window.device.platform === 'iOS' && parseFloat(window.device.version) >= 7.0 ) {
          $('.ui-header > *').css('margin-top', function (index, curValue) {return parseInt(curValue, 10) + 20 + 'px';});
    }
}
document.addEventListener('deviceready', onDeviceReady, false);

うまくいった。

PhoneGap 3.3.0、jQuery 1.4.0 で確認。

まぁなんとも急場しのぎ感は否めないけど、ハイブリッドアプリ作るなら、こうやってAppleにしがみついて行くのは避けられないのかな。と思う。

ちなみに、すでにMonacaは使っていない。Mac持ってるならローカルでPhoneGap開発したほうが何かと良いっぽい。このあたりはおいおい。


参考：PhoneGap and Cordova with iOS 7 | Christophe Coenraetsのコメント欄