投稿

11月, 2017の投稿を表示しています

iPhoneXかどうかをJavaScriptで判断するには?

イメージ
まずUserAgentで判別できないかと考えた。しかし、 mozilla/5.0 (iphone; cpu iphone os 11_1 like mac os x) applewebkit/604.3.5 (khtml, like gecko) mobile/15b93 という感じなので無理。 cordova-plugin-deviceでもダメ。 で、世間ではどのような議論が行われているかというと、 ios - Detect if the device is iPhone X - Stack Overflow 画面の幅高さで判別しろとか、ネイティブ側で struct utsname systemInfo; uname(&systemInfo); 的なことをしろとか、safe-area-inset-*があるかどうかで判別しろとか、そういった議論が行われている。 今回はJavaScriptで判別する必要があるので、ネイティブ側から情報を取得する方法は使えない。 画面の幅高さで判別する方法は、現状では問題無いだろうが、端末ごとに幅高さが変更される可能性があることを考えると、あまり上手い方法とは言えない。 safe-area-inset-*があるかどうかで判別するのは有効そうだ。safe-area-inset-*を持つということは「ノッチ」がある端末ということなので、iPhoneXに限らずEssential Phoneなども検出できるだろう。 問題はJSからどのようにsafe-area-inset-*を取得するかだ。 WEBページをiPhoneXに対応させる方法として、CSSで「constant(safe-area-insets-*)」を使うということはわかっているが、これをJSで取得するにはどうするのか? window.screenやdocument.documentElement.styleのプロパティーをくまなく見てみたが、safe-area-inset-*を取れそうなプロパティーは存在しなかった。 そこで、safe-area-inset-*のpaddingを持つダミーエレメントをテンポラリにDOMツリーに追加し、値を取得した後すぐに削除するというdirtyな実装をした。 /** * セーフエリ