iPhoneXで閲覧しているかどうかをJavaScriptで判定したい！

iPhoneXで閲覧しているか否かは、このように取得できそうです。
画面下付きのメニューをつけたいけど、画面下のホームに戻るバーなどが邪魔なのでデザインを調整したい！なんて時にも活用できます。

var isIPhoneX = window.devicePixelRatio === 3 &&
  (window.screen.width === 375 || window.screen.height === 375) &&
  /iPhone/.test(window.navigator.userAgent);

// たとえばjQueryならこんな感じで使える。
$('.bottom-menu').toggleClass('is-iphonex', isIPhoneX);

window.devicePixelRatio は見慣れない方も多いかもしれませんが、CSSで指定した1pxが、実際の画面ではいくつのピクセルで表示されているかを取得できます。iPhoneXのretinaディスプレイではCSSで1pxの線などを引くと、スクリーン上は3pxの物理ピクセルで表示されます。

さいごに

• 2018年9月現在ではこれでいけそうですが、新しいiPhoneの機種が出たり、アップデートがあった場合にも対応できる保証はありません。
• この記事は自分のメモ用に書いたものです。
• しょしんしゃなので、まちがっているところがあれば、やさしくおしえてください。