Обнаружить изменение высоты и ширины окна с помощью прослушивателя событий

Question

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

Предоставлено 2 проблемы, которые могут быть разрешены вместе или с использованием отдельного кода.

Задача 1

Я просмотра моей страницы на рабочем столе и изменить размер моего окна таким образом, что ширина = 768px и высота = 767px, а затем активировать режим ландшафта.

Есть ли слушательсобытия, которое определяет, следует ли отображать портретную или альбомную версию страницы просто по

if(window.innerHeight > window.innerWidth) { 
    portrait = true; 
    /*display to portrait version of page*/ 
} 
else { 
    portrait = false; 
    /*display to landscape version of page*/ 
} 

или я должен создать приемник пользовательских событий и в этом случае хау ?

Задача 2

Я просмотр моей страницы на мобильном устройстве. Когда он обнаруживает, что он в ландшафтном режиме, поворачивая, активируйте ландшафтный режим.

Я считаю, что это может быть решена с помощью

window.addEventListener("orientationchange", function() { 
/*display landscape/portrait version*/ 
}, false); 

Answer 1

В зависимости от того, что вы на самом деле пытаетесь сделать после того, как вы определить, является ли пользователь находится в ландшафтном режиме или не существует несколько различных реализаций:

Detect ли пользователь или пейзаж Портрет

function readDeviceOrientation() {   
    if (Math.abs(window.orientation) === 90) { 
     // Landscape 
    } else { 
     // Portrait 
    } 
} 

Регулировка укладки с помощью ориентации медиа-запрос

/* For portrait, we want the tool bar on top */ 
@media screen and (orientation: portrait) { 
    #toolbar { 
     width: 100%; 
    } 
} 

/* For landscape, we want the tool bar stick on the left */ 
@media screen and (orientation: landscape) { 
    #toolbar { 
     position: fixed; 
     width: 2.65em; 
     height: 100%; 
    } 

    p { 
     margin-left: 2em; 
    } 

    li + li { 
     margin-top: .5em; 
    } 
} 

Использование JQuery

$(window).resize(function() { 
    if (Math.abs(window.orientation) === 90) { 
     // Do Landscape 
    } else { 
     // Do Portrait 
    } 
}; 

Прислушайтесь изменения ориентации

screen.addEventListener("orientationchange", function() { 
    console.log("The orientation of the screen is: " + screen.orientation); 
});