[자바스크립트] 화면 방향(가로/세로) 확인하기

만들오 2021. 1. 23. 01:49

어제는 접속환경(Mobile/PC)을 확인하는 코드를 알아보았습니다.

오늘은 화면의 방향을 확인하는 코드를 기록하겠습니다.

<!DOCTYPE html>
<html>

<head>
    <title>Check Mobile</title>
</head>
<script>
    if (window.orientation == 0) {
        console.log("세로");
    } else {
        console.log("가로");
    }
</script>

</html>

어제보다 더욱 간단한 코드로 스크린의 방향을 확인할 수 있습니다.

방향이 고정된 PC의 경우 window.orientation 의 값이 undefined로 나오게 됩니다.

이 코드를 참고해 <video>, <canvas>의 크기를 수정하는 것은 다음과 같습니다.

let w, h;
if (window.orientation == 0) {
    w = 240;
    h = 320;
} else {
    w = 320;
    h = 240;
}
video.width = w;
video.height = h;
canvas.width = w;
canvas.height = h;

* 이 글은 티스토리 카카오계정 연동정책으로 인해 이전 블로그(오코취) 글을 옮겨왔습니다.

[끝].

728x90