現在開発中のアプリを、ノッチのある iPhoneX で動作確認したところ、個人的に非常に見た目が格好悪かったので、その対処法について。
結果としては、無事にノッチにも対応した見た目に変更することができました。
なお、今回参考にさせていただいた記事はこちら。
・検証。iPhone Xでアプリの見た目はどうなるのか？｜モナカプレス
・iPhone X に対応したモバイルサイト・Cordova アプリの作り方と注意点 – Naoki Matagawa – Medium
早速適用方法ですが、まず HTML に下記の Metaタグを追加します。
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width,viewport-fit=cover">
content に viewport-fit=cover を追加しています。
こちらを追加することで、アプリの起動時に画面の上下にあった白いエリアが無くなります。
これだけでも大分アプリらしくなりますが、やはりノッチが気になる…。
ので、次に 下記のコマンドで、スプラッシュページのプラグインを追加します。
cordova plugin add cordova-plugin-splashscreen
そうしたら、下のサイズ・名前の画像を用意します。
- Default@2x~iphone~anyany.png – 1334×1334
- Default@2x~iphone~comany.png – 750×1334
- Default@2x~iphone~comcom.png – 1334×750
- Default@3x~iphone~anyany.png – 2208×2208
- Default@3x~iphone~anycom.png – 2208×1242
- Default@3x~iphone~comany.png – 1242×2208
- Default@2x~ipad~anyany.png – 2732×2732
- Default@2x~ipad~comany.png – 1278×2732
保存場所は、res/screen/ios ディレクトリの中です。
結構大きいサイズの画像が必要です。
で、画像が用意出来たら、config.xml に下記の設定を追加します。
<platform name="ios">
<splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@2x~iphone~comany.png" />
<splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
<splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
<splash src="res/screen/ios/Default@3x~iphone~comany.png" />
<splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
<splash src="res/screen/ios/Default@2x~ipad~comany.png" />
</platform>
ここまで完了した状態で実行すれば、アプリの画面がノッチの部分まできちんと広がります。
が、広がりすぎで、レイアウトによっては角が欠けたりするので、下記の CSS を追加します。
html {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
padding-right: constant(safe-area-inset-right);
padding-right: env(safe-area-inset-right);
padding-left: constant(safe-area-inset-left);
padding-left: env(safe-area-inset-left);
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
こちらを指定することで、ノッチ部分等に画面が被さるのを防ぐことができます。
なお、場合によっては html への指定ではうまくいかない場合がありますので、その辺りはデザインによって適宜変更してください。
私は ヘッダーとフッターがあるデザインだったため、padding-top と padding-bottom は html ではなく、ヘッダーとフッターにそれぞれ指定しました。
なお、上記の設定は、端末が iPhoneX の時のみ有効になりますので、Android や 他の iPhone 端末には影響しません。
以上、Cordova アプリの見た目を iPhoneX に対応させる方法でした。
設定は意外と簡単で、むしろスプラッシュページの画像を用意する方が面倒でした。
もし同じことでお悩みの方がいらっしゃいましたら、参考にしていただければと思います。
