【cordova】iPhone X レイアウト対応

はじめに

デフォルトだと iPhone X だと上下に変な空白が出るのでその修正方法です

修正1(上下の白い余白を削除する)

index.html に以下の meta タグを追加する

1
2
3
4
5
6
7
<head>
<!-- for Iphone X -->
<meta
name="viewport"
content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover"
/>
</head>

ちなみに僕はここで無駄にめちゃくちゃハマって数日無駄にしてしまったのですが、もしすでに
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
の記述がすでに inde.html に存在している場合はちゃんと削除して追加(=上書き)してください。
僕はその存在に気付かずにただ単に追加してしまい、うまく追加が効かなくてひたすらハマりました、、

修正2(まだ残っている余白を削除する)

以下の設定を行うことでスプラッシュスクリーンだけでなく、通常の画面についてもフルスクリーンになる

スプラッシュスクリーンの設定方法

修正3(重なりを避ける)

そのままだとフルスクリーンになりすぎて上下で画面の端が見切れてしまうので以下の対応を行い、見切れないようにする

css に以下を追加する

1
2
3
4
5
6
body {
padding-top: 44px;
/* 以下を使うという記事もあるが、cordovaだと効かない */
/* padding-top: constant(safe-area-inset-top); */
/* padding-top: env(safe-area-inset-top); */
}

参考

https://blog.phonegap.com/displaying-a-phonegap-app-correctly-on-the-iphone-x-c4a85664c493
https://qiita.com/keeey/items/c175bd8ef12ee65ac3fc

おわりに

以上です。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×