어제는 접속환경(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
'소프트웨어 > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] Node.js - 웹서버에 Websocket 통신 추가하기 (0) | 2021.01.23 |
|---|---|
| [자바스크립트] Node.js - 웹서버 html 파일 랜더링하기 (0) | 2021.01.23 |
| [자바스크립트] 접속환경(Mobile/PC) 확인하기 (0) | 2021.01.23 |
| [자바스크립트] WebRTC를 이용한 카메라 사용 기초 (0) | 2021.01.23 |
| [자바스크립트] Canvas를 이용한 조이스틱 만들기 (1) | 2021.01.23 |
댓글