iPhoneX 및 노치 감지

Question

자바 스크립트 사용; 사용자 기기가 iPhoneX인지 어떻게 확인할 수 있습니까?

또한 가로 방향으로 볼 때 iPhone의 '노치'가 어떤면에 있는지 확인할 수 있습니까?

은 거기에 몇 가지 훌륭한 기사가 있습니다 https://webkit.org/blog/7929/designing-websites-for-iphone-x/

...하지만 이들은 기본적으로이 글을 쓰는 시점에서 많은 모바일 브라우저에서 지원되지 않는 첨단 기능을 활용하는 경향이있다.

Answer 1

그래서 iPhoneX를 Javascript로 감지하는 방법을 생각해 냈습니다. 내 프로세스는 사용자의 장치 방향에 따라 노치의 위치를 ​​확인 : 내가 도울하지만이 작은 해킹 단지 조합처럼 느낄 수

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'); 
    } 
} 

. 아마 눈치 챘을 것이다. 내 자바 스크립트는 정확하게 높은 수준이 아니며이를 수행하기위한 더 나은/깨끗한 방법이 있다고 확신합니다.

내가 고려하지 않은 문제에 대한 피드백과 해결책을 얻게되어 매우 기쁩니다.

---

방금 ​​(노치를 무시)를 iPhoneX를 확인하려면이 작업을 수행해야합니다

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

을