사용자의 화면에 대한 정보가 들어있는 window.screen 객체를 사용할 수 있다.
window.screen
window 접두사는 생략할 수 있다.
screen.width
화면의 너비를 픽셀 단위로 반환한다.
HTML
<p id="width"></p>
Javascript
document.getElementById("width").innerHTML = "화면 너비는 " + screen.width + "px 입니다.";
기본 예시
screen.height
화면의 높이를 픽셀 단위로 반환한다.
HTML
<p id="height"></p>
Javascript
document.getElementById("height").innerHTML = "화면의 높이는 " + screen.height + "px 입니다.";
기본 예시
screen.availWidth
Windows 작업 표시줄과 같은 인터페이스 기능을 뺀 값을 픽셀 단위로 반환한다.
HTML
<p id="availwidth"></p>
Javascript
document.getElementById("availwidth").innerHTML = "사용 가능한 화면의 넓이는 " + screen.availWidth + "px 입니다.";
기본 예시
screen.availHeight
Windows 작업 표시줄과 같은 인터페이스 기능을 뺀 값을 픽셀 단위로 반환한다.
HTML
<p id="availheight"></p>
Javascript
document.getElementById("availheight").innerHTML = "사용가능한 화면의 높이는 " + screen.availHeight + "px 입니다.";
기본 예시
screen.colorDepth
한 색상을 표시하는 데 사용되는 비트 수를 반환한다.
사용된 코드 설명
8비트
:
28 = 256개의 컬러.
16비트
:
216 = 65,536개의 컬러.
24비트
:
224 = 16,777,216개의 컬러 “트루 컬러”. RGB 컬러도 여기 해당된다.
32비트
:
216 * 2 = 4,294,967,296개의 컬러 “트루 컬러”. 24비트 컬러에 + 8비트 알파 컬러
HTML
<p id="colorDepth"></p>
Javascript
document.getElementById("colorDepth").innerHTML = "디스플레이 색 심도는 " + screen.colorDepth + "비트 입니다.";
기본 예시
screen.pixelDepth
화면의 픽셀 깊이를 반환 한다.
HTML
<p id="pixelDepth"></p>
Javascript
document.getElementById("pixelDepth").innerHTML = "디스플레이 픽셀 심도는 " + screen.pixelDepth + "비트 입니다.";
기본 예시
참고
W3C School - JavaScript Window
W3C School - JavaScript Window Screen
관련 포스트
Javascript - BOM - window 객체
Javascript - BOM - screen 객체 - 현재글
Javascript - BOM - location 객체
Javascript - BOM - history 객체
Javascript - BOM - popup boxes 객체