개발/Javascript
모바일(스마트폰 or 패드) 반응형 웹페이지에서 가로화면인지 세로화면인지 확인
꿈꾸는법사
2020. 7. 13. 14:39
반응형
<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의 크기를 비교하여 가로모드인지 세로모드인지 판별할 수 있다.
반응형