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

So I've come up with a method of detecting the iPhoneX with Javascript. My process also checks for the position of the Notch depending on the users device orientation:

https://codepen.io/marknotton/pen/NwpgBK

(function(window){

  // Really basic check for the ios platform
  // https://stackoverflow.com/questions/9038625/detect-if-device-is-ios
  var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

  // Get the device pixel ratio
  var ratio = window.devicePixelRatio || 1;

  // Define the users device screen dimensions
  var screen = {
    width : window.screen.width * ratio,
    height : window.screen.height * ratio
  };

  // iPhone X Detection
  if (iOS && screen.width == 1125 && screen.height === 2436) {

    // Set a global variable now we've determined the iPhoneX is true
    window.iphoneX = true;

    // Adds a listener for ios devices that checks for orientation changes.
    window.addEventListener('orientationchange', update);
    update();
  }

  // Each time the device orientation changes, run this update function
  function update() {
    notch();
    iphoneXChecker();
  }

  // Notch position checker
  function notch() {

    var _notch = '';

    if( 'orientation' in window ) {
      // Mobile
      if (window.orientation == 90) {
        _notch = 'left';
      } else if (window.orientation == -90) {
        _notch = 'right';
      }
    } else if ( 'orientation' in window.screen ) {
      // Webkit
      if( screen.orientation.type === 'landscape-primary') {
        _notch = 'left';
      } else if( screen.orientation.type === 'landscape-secondary') {
        _notch = 'right';
      }
    } else if( 'mozOrientation' in window.screen ) {
      // Firefox
      if( screen.mozOrientation === 'landscape-primary') {
        _notch = 'left';
      } else if( screen.mozOrientation === 'landscape-secondary') {
        _notch = 'right';
      }
    }

    window.notch = _notch;
  }

})(window);

// Bespoke functions:
// The above functions have no jQuery Dependencies.
// The below code uses jQuery solely for this quick demo.
if ( window.iphoneX === true ) {
  $('body').addClass('iphoneX');
}
function iphoneXChecker() {
  if (window.notch == 'left') {
    $('body').removeClass('notch-right').addClass('notch-left');
  } else if (window.notch == 'right') {
    $('body').removeClass('notch-left').addClass('notch-right');
  } else {
    $('body').removeClass('notch-right notch-left');
  }
}

I can't help but feel like this is just a combination of little hacks. As you'll probably notice; my Javascript isn't exactly to a high standard and I'm sure there are better/cleaner ways to do this.

I'd be very happy to receive feedback and solutions to issues I've not considered.

---

If you just want to check for the iPhoneX (ignoring the Notch), this should do the job:

https://codepen.io/marknotton/pen/MOpodJ

(function(){

  // Really basic check for the ios platform
  // https://stackoverflow.com/questions/9038625/detect-if-device-is-ios
  var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

  // Get the device pixel ratio
  var ratio = window.devicePixelRatio || 1;

  // Define the users device screen dimensions
  var screen = {
    width : window.screen.width * ratio,
    height : window.screen.height * ratio
  };

  // iPhone X Detection
  if (iOS && screen.width == 1125 && screen.height === 2436) {
    alert('iPhoneX Detected!');
  }
})();