Как определить ориентацию устройства с помощью 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).


android cordova javascript jqtouch
person Fahd Sheikh    schedule 15.04.2016    source источник

Ответы (1)


arrow_upward
18
arrow_downward

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

Во-первых, согласно документации Screen 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, которые несовместимы с экраном, javascript-and-phonegap-in-io">этот пост показывает, что вы можете продолжать использовать innerWidth и innerHeight при изменении размера окна.

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

 window.onresize = function(){ getOrientation(); }
person Fahd Sheikh    schedule 15.04.2016
comment
Стоит отметить, что это решение работает только для Chrome ›= 39 и Firefox Mobile на смартфонах. ОП добавил тег ios, и API экрана не является решением для этого. - person Popatop15; 03.11.2017