[javascript] 자바스크립트로 모바일 디바이스의 화면 크기 확인하기

05 Dec 2023

javascript

개요

모바일 디바이스는 다양한 화면 크기를 가지고 있습니다. 웹 애플리케이션 또는 웹 사이트를 개발할 때 모바일 디바이스의 화면 크기를 확인하는 것은 중요한 요소입니다. 자바스크립트를 사용하여 모바일 디바이스의 화면 크기를 동적으로 확인하는 방법에 대해 알아보겠습니다.

솔루션

1. window 객체를 이용한 화면 크기 확인

window 객체를 사용하여 모바일 디바이스의 화면 크기를 확인할 수 있습니다. window.innerWidth와 window.innerHeight 속성을 사용하면 모바일 디바이스의 뷰포트의 가로와 세로 크기를 알 수 있습니다.

var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;

console.log("화면 가로 크기: " + screenWidth);
console.log("화면 세로 크기: " + screenHeight);

2. 디바이스 픽셀 비율(DPR)을 이용한 화면 크기 확인

모바일 디바이스의 디스플레이는 픽셀 밀도가 다를 수 있으며, 이를 고려하여 화면 크기를 확인할 수도 있습니다. window.devicePixelRatio 속성을 사용하면 디바이스의 픽셀 밀도 비율을 알 수 있습니다.

var screenWidth = window.innerWidth * window.devicePixelRatio;
var screenHeight = window.innerHeight * window.devicePixelRatio;

console.log("화면 가로 크기: " + screenWidth);
console.log("화면 세로 크기: " + screenHeight);

결론

위의 방법들을 사용하면 자바스크립트로 모바일 디바이스의 화면 크기를 확인할 수 있습니다. 웹 애플리케이션 또는 웹 사이트를 개발할 때 모바일 디바이스의 화면 크기를 고려하여 레이아웃을 조정할 수 있습니다. 추가적으로 뷰포트에 대한 설정도 함께 고려해야 합니다.

참고 자료: