자바스크립트 화면 크기, 브라우저 크기 구하기

screen 객체로 화면 크기 구하기

자바스크립트 screen은 브라우저 정보를 가져오는 객체입니다. 

screen 객체의 속성은 아래와 같습니다.

screen.width        // 화면(모니터 해상도)의 너비

screen.availWidth  // 모니터 화면의 작업 표시줄을 제외한 너비

screen.height      // 화면(모니터 해상도)의 높이

screen.availHeight // 모니터 화면의 작업 표시줄을 제외한 높이

브라우저 크기 구하기

만약 브라우저의 크기를 구하고 싶은 경우 사용할 수 있는 방법들입니다.

HTML 표준 없음

// 실제 사용하는 브라우저의 안쪽 너비

document.body.offsetWidth 

document.body.scrollWidth 

document.body.clientWidth 

// 실제 사용하는 브라우저의 안쪽 높이

document.body.offsetHeight 

document.body.scrollHeight 

document.body.clientHeight 

HTML5 표준

window.outerWidth  // 브라우저 창의 너비

window.innerWidth  // 브라우저 두께를 제외한 너비

window.outerHeight // 브라우저 창의 높이

window.innerHeight // 브라우저 두께를 제외한 높이

표준이 아닌 방법들로 해보니 브라우저 환경에 따라 인식이 이상하게 되는 경우가 발생했습니다.

제일 확실한 방법은 screen 객체를 활용하거나 HTML5 표준을 따르는 방법인 것 같습니다.

IE, 크롬 테스트

익스11, 크롬에서 테스트 해보니 HTML5 표준과 

screen 객체를 활용할 때만 일관성있는 결과를 보여주었습니다.

	Crome	IE11
availWidth	1920	1080
outerWidth	1507	1357
innerWidth	1281	1129
offsetWidth	1281	1129
scrollWidth	1281	1129
clientWidth	1281	1129
availHeight	1080	1080
outerHeight	899	849
innerHeight	1012	1010
offsetHeight	150	160
scrollHeight	899	176
clientHeight	180	192

 

 

* 포스트의 쿠팡 링크로 구매시 쿠팡 파트너스 활동의 일환으로 수수료를 제공받고 있습니다.