JavaScript로 화면 해상도 감지하기

웹 개발에서 반응형 디자인을 구현하거나 디바이스별 최적화 작업을 할 때, 사용자의 화면 해상도를 알아내야 하는 경우가 자주 있습니다. JavaScript에서는 window.screen 객체를 활용하면 간단하게 화면 해상도를 감지할 수 있습니다.

1. 화면 너비(가로 해상도) 구하기

사용 가능한 화면 너비는 다음 속성으로 확인할 수 있습니다.

window.screen.availWidth

2. 화면 높이(세로 해상도) 구하기

마찬가지로 사용 가능한 화면 높이는 아래 속성으로 얻습니다.

window.screen.availHeight

전체 예제 코드

다음은 화면 해상도를 감지하여 콘솔에 출력하는 전체 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>화면 해상도 감지</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<script>
    console.log("Available Width=" + window.screen.availWidth);
    console.log("Available Height=" + window.screen.availHeight);
</script>
</body>
</html>

실행 방법

위 프로그램을 실행하려면 파일 이름을 “index.html”로 저장한 후, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 “Open with Live Server” 옵션을 선택하면 됩니다. 이후 브라우저 개발자 도구(F12)의 콘솔 탭에서 결과를 확인할 수 있습니다.

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 출력이 표시됩니다.

JavaScript로 화면 해상도 감지하기 – window.screen 객체 완벽 가이드

추가로 알아두면 좋은 속성들

window.screen.width / height: 전체 화면의 실제 크기를 반환합니다.
window.screen.availWidth / availHeight: 작업 표시줄 등 시스템 UI를 제외한 실제 사용 가능한 영역의 크기를 반환합니다.
window.devicePixelRatio: 고해상도(레티나) 디스플레이 대응 시 유용한 픽셀 밀도 비율 값입니다.

이처럼 window.screen 객체를 활용하면 별도의 라이브러리 없이도 순수 JavaScript만으로 화면 해상도 정보를 손쉽게 가져올 수 있으며, 이를 바탕으로 반응형 웹 페이지나 디바이스별 맞춤 기능을 구현할 수 있습니다.