Как определить ориентацию устройства с помощью JavaScript?

Я видел несколько способов определения ориентации экрана устройства, в том числе с помощью проверки для тестирования innerWidth против innerHeight, например.

function getOrientation(){
    var orientation = window.innerWidth > window.innerHeight ? "Landscape" : "Primary";
    return orientation;
}

но что, если я хочу проверить для изменения в ориентации экрана, а также с помощью прослушивателя событий? Я пробовал этот код но он не работает для меня.

  function doOnOrientationChange()
  {
    switch(window.orientation) 
    {  
      case -90:
      case 90:
        alert('landscape');
        break; 
      default:
        alert('portrait');
        break; 
    }
  }

  window.addEventListener('orientationchange', doOnOrientationChange);

  // Initial execution if needed
  doOnOrientationChange();

он не обнаруживает ориентацию устройства, и слушатель не регистрируется для меня (я использую эмулятор устройства Chrome).

6
android cordova javascript jqtouch

1 ответов

есть два способа сделать это:

во-первых, согласно API экрана документация, используя >= Chrome 38, Firefox и IE 11, объект экрана доступен не только для просмотра ориентации, но и для регистрации прослушивателя при каждом изменении ориентации устройства.

screen.orientation.type явно даст вам знать, что такое ориентация, и для слушателя вы можете использовать что-то простое, как: 

screen.orientation.onchange = function (){
    // logs 'portrait' or 'landscape'
    console.log(screen.orientation.type.match(/\w+/)[0]);
};

во-вторых, для совместимости с другие браузеры, такие как Safari, которые не совместимы с экраном,этот пост показывает, что вы можете продолжать использовать innerWidth и innerHeight при изменении размера окна.

 function getOrientation(){
    var orientation = window.innerWidth > window.innerHeight ? "Landscape" : "Portrait";
    return orientation;
}

 window.onresize = function(){ getOrientation(); }
13