【Cordova】アプリの見た目をiPhoneXの画面に対応させる方法

村上 著者:村上

【Cordova】アプリの見た目をiPhoneXの画面に対応させる方法

現在開発中のアプリを、ノッチのある 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">

contentviewport-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-toppadding-bottom は html ではなく、ヘッダーとフッターにそれぞれ指定しました。
なお、上記の設定は、端末が iPhoneX の時のみ有効になりますので、Android や 他の iPhone 端末には影響しません。

 

以上、Cordova アプリの見た目を iPhoneX に対応させる方法でした。
設定は意外と簡単で、むしろスプラッシュページの画像を用意する方が面倒でした。
もし同じことでお悩みの方がいらっしゃいましたら、参考にしていただければと思います。

  • この記事いいね! (0)

著者について

村上

村上 administrator