회원가입아이디/비번찾기
홈으로


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

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

세로 모드: 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 모드일 때 실행할 스크립트
}
});
추천추천 : 95 추천 목록
번호 제목
2,885
input 입력 필드 앞뒤 공백 실시간 제거
2,884
Placeholder 포커스시 감추기
2,883
MySQL 중복된 데이터를 삭제
2,882
MySQL 중복 데이터 확인
2,881
sessionStorage.getItem 와 sessionStorage.setItem
2,880
제이쿼리 랜덤으로 배경색 변경
2,879
preg match에 관한 정규식
2,878
Stream an audio file with MediaPlayer 오디오 파일 스트리밍 하기
2,877
Audio Streaming PHP Code
2,876
PHP $ SERVER 환경 변수 정리
2,875
Vimeo (비메오) API 를 사용하여 플레이어 컨트롤하기
2,874
iframe 사용시 하단에 발생하는 공백 제거방법
2,873
아이프레임(iframe) 전체화면 가능하게 하기
2,872
부트스트랩(bootstrapk)에서 사용하는 class명 정리
2,871
부트스트랩 CSS
2,870
크롬에서 마진 조절
2,869
PHP 현재 페이지의 도메인명이나 url등의 정보 알아오기
2,868
PHP preg match all()
2,867
PHP 로 웹페이지 긁어오기 모든 방법 총정리!
2,866
[PHP] 원격지 파일 주소 노출 안하고 curl로 다운로드 받기
2,865
PHP 함수 정리
2,864
아이프레임(iframe) 비율 유지하면서 크기 조절하는 방법
2,863
PHP 배열에서 무작위로 하나 뽑아주는 array rand() 함수
2,862
PHP 정규식 정리
2,861
PHP 정규식을 활용한 태그 및 특정 문자열 제거 및 추출 방법
2,860
php 크롤링 또는 파싱 함수, 정규식 모음
2,859
제이쿼리 기본 명령어
웹페이지 가로 모드세로 모드 인식하기
2,857
모바일 웹 화면 강제 회전(가로모드 고정)
2,856
[HTML5]에서 frameset 대체 방법과 iframe 속성
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright ⓒ musictrot All rights reserved.