ベゼルレスのスマートフォン対応

Question

サイトの下部分にアイコンのメニューバーをtwitterのように表示しているのですが、
iphone Xなどの、ベゼルレスのスマホの時に、iphoneのUIとかぶってしまいます。

twitterのようにベゼルレスの端末にのみに下部に余白を付けたいのですが、jsで判定できますでしょうか？
androidの対応も考えると今後、スマホに機種が増えるたびにスマホの機種を追加するのは保守性が悪いので、機種名で分別するのは避けたいです。

自サービス	twitter
iphoneのUIとアイコンがかぶってしまっている	余白があるのでiphoneのUIと被らない

挙動については、oyoのspサイトが自サービスと同じ挙動になっていたので、
以下でご確認ください。
OYO

Answer 1

参考

Comments

[TaikiNamioka]

あろがとうございます！
ちょうど自分も似たようなサイトを見つけられました
https://blog.umeru.ma/post/ios-safaris-action-bar-area-block-tap-event/