모바일 트래픽이 데스크탑을 앞지른 시대인 요즘은, 모바일이나 데스크탑 어디에서도 콘텐츠가 무리 없이 보이도록 대부분의 웹페이지들이 반응형으로 제작됩니다.
반응형 페이지를 만들 때 폰을 세로로 들고 있느냐 가로로 들고 있느냐를 판별하고, 그에 따라 레이아웃을 맞춰 주어야 하는 일이 꽤 자주 있어요. 데스크탑에서 브라우저 창의 폭과 높이 중 어느게 더 큰지를 판별하는 것으로 생각해도 됩니다. 같은 동작이에요~
세로 모드: Portrait(포트레이트) 모드
가로 모드: Landscape(랜드스케이프) 모드
판별은 CSS로도 가능하고 자바스크립트로도 가능한데요,
용도에 따라 적절한 걸 사용하면 되겠지요~
CSS를 이용한 방법
미디어 쿼리를 사용합니다.
@media (orientation: portrait) {
/* Portrait 모드일 때 적용할 CSS */
}
@media (orientation: landscape) {
/* Landscape 모드일 때 적용할 CSS */
}
자바스크립트를 이용한 방법
window.matchMedia(‘(orientation: portrait)’).matches 가 true면 Portrait 모드이고,
window.matchMedia(‘(orientation: landscape)’).matches 가 true면 Landscape 모드입니다.
if (window.matchMedia('(orientation: portrait)').matches) {
// Portrait 모드일 때 실행할 스크립트
// 폭과 높이가 같으면 Portrait 모드로 인식돼요
} else {
// Landscape 모드일 때 실행할 스크립트
}
아래↓처럼 브라우저 창 사이즈를 비교해서 판별할 수도 있어요.
if (window.innerWidth <= window.innerHeight) {
// Portrait 모드일 때 실행할 스크립트
} else {
// Landscape 모드일 때 실행할 스크립트
}
두 가지 방법의 실행 속도는 큰 차이가 없으니, 취향에 맞는 방법을 쓰세요~
창 사이즈가 바뀔 때마다 체크하고 싶다면, ‘resize’ 이벤트에 바인딩된 이벤트핸들러 함수에서 체크해주면 됩니다.
이렇게요↓
window.addEventListener('resize', function () {
if (window.matchMedia('(orientation: portrait)').matches) {
// Portrait 모드일 때 실행할 스크립트
// 폭과 높이가 같으면 Portrait 모드로 인식돼요
} else {
// Landscape 모드일 때 실행할 스크립트
}
});
추천 : 