iPhoneX和刘海检测

Question

如何使用Javascript检查用户的设备是否为iPhoneX？

同时，在横屏模式下，如何确定iPhone的“刘海”在哪一侧？

有一些很棒的文章：https://webkit.org/blog/7929/designing-websites-for-iphone-x/

但是，这些文章往往利用了许多移动浏览器目前不支持的最新功能。

- Mark Notton

Answer 1

所以我用Javascript想出了一种检测iPhoneX的方法。我的过程还根据用户设备的方向检查凸槽的位置：

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

(function(window){

  // Really basic check for the ios platform
  // https://dev59.com/EGox5IYBdhLWcg3wr2To
  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');
  }
}

我不禁觉得这只是一些小技巧的组合。正如您可能注意到的那样，我的JavaScript水平并不高，我相信有更好/更干净的方法来实现这个。

如果您有任何反馈或解决我没有考虑的问题的解决方案，我会非常高兴。

---

如果您只想检查iPhoneX（忽略刘海屏），则应该可以使用此代码：

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

(function(){

  // Really basic check for the ios platform
  // https://dev59.com/EGox5IYBdhLWcg3wr2To
  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!');
  }
})();

- Mark Notton

---

该死！我需要在Swift上相同的解决方案！xD - Bimawa

Answer 2

iPhone X 和 11 的屏幕长宽比为9:19.5：

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

我们尝试在所有 iPhone X 和 11 上使用 window.screen。

X，Xs，Xs Max（显示缩放：缩小），11 Pro，11 Pro Max（显示缩放：缩小）：

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

Xs Max（显示缩放：标准），XR，11，11 Pro Max（显示缩放：标准）：

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...
}

请记住，window.screen总是返回纵向的尺寸，无论设备当前方向如何。

- StelArian

---

谢谢StelArian。我的原始帖子已经几年了，只适用于最初的iPhone X。所以我毫不怀疑这将非常有用。 - Mark Notton

我注意到这篇文章有点旧了，但是它是我在谷歌上第一个搜索"js detect iphone x"时找到的结果。所以我想这里是对的地方，Mark :) - StelArian