모바일 기기 가로/세로 방향 확인

지니씨·2022년 12월 12일
0

프론트엔드

목록 보기
50/84

https://stackoverflow.com/questions/4917664/detect-viewport-orientation-if-orientation-is-portrait-display-alert-message-ad

portrait 세로, landscape 가로

window.orientationchange - Deprecated

https://developer.mozilla.org/en-US/docs/Web/API/Window/orientationchange_event

window.matchMedia - 지원범위 이슈

지원범위 : https://caniuse.com/matchmedia

if (window.matchMedia("(orientation: portrait)").matches) {
   // you're in PORTRAIT mode
}

if (window.matchMedia("(orientation: landscape)").matches) {
   // you're in LANDSCAPE mode
}

window 사이즈 체크

function isPortrait() {
    return window.innerHeight > window.innerWidth;
}
function isPortrait() {
    return screen.innerHeight > screen.innerWidth;
}

실제 모바일 기기에서 모드 변경 시 isPortrait()바로 호출 하면 변경 전 사이즈를 체크해서 제대로 확인되지않음, setTimeout 활용
ios safari 브라우저에서는 스크롤시에도 resize 이벤트 발생 참고

profile
하루 모아 평생 🧚🏻

0개의 댓글