Cordova iOSでSafeAreaの有無判定で悩んだ件

CordovaでiPhoneアプリでも作ってみようかと、ちょっと手を出してみましたが、意外なところで、つまづいたのでメモ。

iPhone X以降、画面に切り込みが入り、「ノッチ」と呼ばれる部分が存在するようになりました。それで、iPhone SEやX以前には無かった画面上部の部分を、SafeAreaと呼ぶようです。

そして、このSafeAreaの有無が簡単に取れないんです！どうして？！

そして、散々調べて解決方法を見つけたので、ここにメモっておきます。

手順(1) CSSの準備

まず、以下のCSSを作成します。

root.css

:root {
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
}

下記の通り取り込むようにしておきます。

index.html

<link rel="stylesheet" href="css/root.css">

手順(2) JSで読み込む

以下のようなコードで、SafeAreaのサイズを得られます。「0px」とか「34px」とか得られます。整数で欲しければparseInt(getSafeAreaSize())を実行します。

get_safe_area_size.js

function getSafeAreaSize() {
    return getComputedStyle(document.documentElement).getPropertyValue("--sab");
}

参考

• (上記の解決作の元ネタ) https://stackoverflow.com/questions/47112393/getting-the-iphone-x-safe-area-using-javascript
• (端末と値の一覧) https://qiita.com/MJeeeey/items/a640922da33dacc0fc30
• (div作って設定して取得するようなJS関数を紹介している) https://tenderfeel.xsrv.jp/javascript/4775/