iPhoneX and Notch detection

Question

Using Javascript; how can I check if the users device is an iPhoneX?

Also, how can I determine what side the iPhones' 'notch' is positioned when in the landscape orientation?

There are some great articles out there: https://webkit.org/blog/7929/designing-websites-for-iphone-x/

... but these tend to take advantage of cutting-edge features that aren't natively supported in many mobile browsers at the time of writing this.

Answer 1

iPhone X and 11 have 9:19.5 aspect ratio:

9 / 19.5 = 0.4615384615.toFixed(3) = "0.462"

Let's try this on all iPhone X and 11 using window.screen.

X, Xs, Xs Max (Display Zoom: Zoomed), 11 Pro, 11 Pro Max (Display Zoom: Zoomed):

375 / 812 = 0.4618226601.toFixed(3) = "0.462"

Xs Max (Display Zoom: Standard), XR, 11, 11 Pro Max (Display Zoom: Standard):

414 / 896 = 0.4620535714.toFixed(3) = "0.462"

So...

let iPhone = /iPhone/.test(navigator.userAgent) && !window.MSStream
let aspect = window.screen.width / window.screen.height
if (iPhone && aspect.toFixed(3) === "0.462") {
    // I'm an iPhone X or 11...
}

Please keep in mind, window.screen always return sizes in portrait, regardless active device orientation.