iPhoneXとノッチ検出

Question

Javascriptを使用しています。ユーザーのデバイスがiPhoneXであるかどうかを確認するにはどうすればよいですか？

さらに、横向きのときにiPhoneの「ノッチ」がどの位置に配置されているかを判断するにはどうすればよいですか？

はそこにいくつかの素晴らしい記事があります。https://webkit.org/blog/7929/designing-websites-for-iphone-x/

...これらはネイティブにこれを書いている時点で、多くの携帯のブラウザでサポートされていない最先端の機能を利用する傾向があります。

Answer 1

私はJavascriptでiPhoneXを検出する方法を考え出しました。私のプロセスは、ユーザーがデバイスの向きに応じて、Notchの位置をチェック：

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

私は助けるが、これは少しハックだけの組み合わせであるように感じることができません。おそらく気付くでしょう。私のJavascriptは厳密に高水準ではありません。私はこれを行うためのより良い/よりクリーンな方法があると確信しています。

私は考慮しなかった問題のフィードバックと解決策を受け取って非常にうれしいです。

---

あなただけ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!'); 
    } 
})();