Определить, есть ли на экране Notch / Cutout web JS - PullRequest
Новая
       15

Определить, есть ли на экране Notch / Cutout web JS

0 голосов
/ 13 декабря 2018

Я ищу кросс-браузер кроссплатформенный проверка, чтобы определить, есть ли у экрана вырез / вырез, когда только у Apple есть такой, это не было проблемой, но теперь в 2018 году многие телефоны на Androidтакже есть эта "вещь", и я уже потратил несколько дней на поиски решения, но пока ничего ...

Мой вопрос - можно ли проверить с помощью JS, есть ли на устройстве пользователя / экране вырез/ notch или это просто экран "обычной формы"?

Может ли браузер сделать это?

Может, у кого-то есть свои мысли на эту тему, я буду рад их услышать.

Теперь для определения iPhone X я использую это: 

(function(window){

  var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  var ratio = window.devicePixelRatio || 1;
  var screen = {
    width : window.screen.width * ratio,
    height : window.screen.height * ratio
  };

  if (iOS && screen.width == 1125 && screen.height === 2436) {

    window.iphoneX = true;

    window.addEventListener('orientationchange', update);
    update();
  }

  function update() {
    notch();
    iphoneXChecker();
  }

  function notch() {

    var _notch = '';

    if( 'orientation' in window ) {
      if (window.orientation == 90) {
        _notch = 'left';
      } else if (window.orientation == -90) {
        _notch = 'right';
      }
    } else if ( 'orientation' in window.screen ) {
      if( screen.orientation.type === 'landscape-primary') {
        _notch = 'left';
      } else if( screen.orientation.type === 'landscape-secondary') {
        _notch = 'right';
      }
    } else if( 'mozOrientation' in window.screen ) {
      if( screen.mozOrientation === 'landscape-primary') {
        _notch = 'left';
      } else if( screen.mozOrientation === 'landscape-secondary') {
        _notch = 'right';
      }
    }

    window.notch = _notch;
  }

})(window);

Кодовые кредиты @Mark Notton

...