はじめに
デフォルトだと iPhone X だと上下に変な空白が出るのでその修正方法です
修正1(上下の白い余白を削除する)
index.html に以下の meta タグを追加する
1 | <head> |
ちなみに僕はここで無駄にめちゃくちゃハマって数日無駄にしてしまったのですが、もしすでに<meta name="viewport" content="width=device-width,initial-scale=1.0" />
の記述がすでに inde.html に存在している場合はちゃんと削除して追加(=上書き)してください。
僕はその存在に気付かずにただ単に追加してしまい、うまく追加が効かなくてひたすらハマりました、、
修正2(まだ残っている余白を削除する)
以下の設定を行うことでスプラッシュスクリーンだけでなく、通常の画面についてもフルスクリーンになる
修正3(重なりを避ける)
そのままだとフルスクリーンになりすぎて上下で画面の端が見切れてしまうので以下の対応を行い、見切れないようにする
css に以下を追加する
1 | body { |
参考
https://blog.phonegap.com/displaying-a-phonegap-app-correctly-on-the-iphone-x-c4a85664c493
https://qiita.com/keeey/items/c175bd8ef12ee65ac3fc
おわりに
以上です。