iPhone X 和 Notch 检测

Posted 2023-03-11

【中文标题】iPhone X 和 Notch 检测

【英文标题】：iPhoneX and Notch detection

【发布时间】：2017-11-10 16:05:13

【问题描述】：

使用javascript；如何检查用户设备是否为 iPhoneX？

另外，我如何确定 iPhone 的“刘海”在横向时位于哪一侧？

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

...但是这些倾向于利用在撰写本文时许多移动浏览器本身不支持的尖端功能。

【参考方案1】：

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

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

(function(window)

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

我不禁觉得这只是小技巧的组合。您可能会注意到；我的 Javascript 并不完全符合高标准，我相信有更好/更清洁的方法可以做到这一点。

我很高兴收到针对我未考虑的问题的反馈和解决方案。

---

如果您只想检查 iPhoneX（忽略 Notch），这应该可以完成：

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

(function()

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

【讨论】：

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

【参考方案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"

所以...

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 始终以纵向返回大小，无论活动的设备方向如何。

【讨论】：

谢谢你。我原来的帖子已经有几年了，只适用于原来的 iPhone X。所以我相信这将证明非常有用。

我注意到它很旧，但这是我在 Google 上寻找“js 检测 iphone x”的第一个结果。所以我想这是正确的地方马克:)