- Media Queries:
@media screen and (orientation: landscape) {
/* landscape */
}
@media screen and (orientation: portrait) {
/* portrait */
}
- resize Event:
window.addEventListener('resize', function() {
if (window.innerWidth > window.innerHeight) {
// landscape
} else {
// portrait
}
}, false);
- orientationchange Event:
window.addEventListener('orientationchange', function() {
switch (window.orientation) {
case -90:
case 90:
// landscape
break;
default:
// portrait
break;
}
}, false);