iPhoneX and Notch detection

问题

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.

回答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!');
  }
})();

回答2:

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.

来源：https://stackoverflow.com/questions/47226824/iphonex-and-notch-detection

标签

javascript

ios

iphone

iphone-x