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

Question

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

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).

Answer 1

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

Во-первых, в соответствии с документацией 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, которые не совместимы с экраном, this post показывает, что вы можете продолжать использовать innerWidth и innerHeight при изменении размера окна.

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

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