[HTML 디자인] 웹페이지 가로 모드/세로 모드 인식하기

모바일 트래픽이 데스크탑을 앞지른 시대인 요즘은, 모바일이나 데스크탑 어디에서도 콘텐츠가 무리 없이 보이도록 대부분의 웹페이지들이 반응형으로 제작됩니다.

반응형 페이지를 만들 때 폰을 세로로 들고 있느냐 가로로 들고 있느냐를 판별하고, 그에 따라 레이아웃을 맞춰 주어야 하는 일이 꽤 자주 있어요. 데스크탑에서 브라우저 창의 폭과 높이 중 어느게 더 큰지를 판별하는 것으로 생각해도 됩니다. 같은 동작이에요~

판별은 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 모드입니다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

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 모드일 때 실행할 스크립트
	}
});

 

[출처] https://studiomeal.com/archives/1068