모바일(스마트폰 or 패드) 반응형 웹페이지에서 가로화면인지 세로화면인지 확인

<style type="text/css">

// 미디어쿼리를 이용한 가로모드, 세로모드일때의 css 적용 방법

@media all and (orientation:portrait) {

// 세로모드일때의 css 적용

}

@media all and (orientation:landscape) {

// 가로모드일때의 css 적용

}

</style>

<script type="text/javascript">

$(document).ready(function() {

// matchMedia를 이용한 가로모드, 세로모드일때의 script 적용 방법

var media = window.matchMedia("(orientation: portrait)");

if (media.matches) {

// 세로모드일때의 script 적용

}

else{

// 가로모드일때의 script 적용

}

});

</script>

cf. 같은 내용으로 window.innerWidth와 window.innerHeight의 크기를 비교하여 가로모드인지 세로모드인지 판별할 수 있다.