[javascript] 자바스크립트 윈도우 창 가로크기, 세로크기 계산 (window.innerWidth, window.innerHeight)
자바스크립트에서 윈도우 창의 가로크기는 window.innerWidth, 세로크기는 window.innerHeight 로 가져온다.
그런데 IE 버전이 낮거나 html 의 에뮬레이트 버전이 낮은 경우 해당 변수를 사용할 수 없을 때가 있다.
그러므로 브라우저 영향을 덜 받도록 다음과 같이 계산한다.
1. 자바스크립트 윈도우 창 가로크기 계산
|
var winWidth = “”;
if (window.innerWidth != null) {
winWidth = window.innerWidth + “”;
} else if (window.document != null && window.document.documentElement != null && window.document.documentElement.clientWidth != null) {
winWidth = window.document.documentElement.clientWidth + “”;
} else if (window.document != null && window.document.body != null && window.document.body.offsetWidth != null) {
winWidth = window.document.body.offsetWidth + “”;
}
|
결과값은 “10px” 처럼 문자열 형태로 리턴된다. 순수한 숫자를 얻고 싶다면 문자열 “px”를 떼고 parseInt를 적용해야 한다. (함수 getNumberFromPixel)
2. 자바스크립트 윈도우 창 세로크기 계산
|
var winHeight = “”;
if (window.innerHeight != null) {
winHeight = window.innerHeight + “”;
} else if (window.document != null && window.document.documentElement != null && window.document.documentElement.clientHeight != null) {
winHeight = winWidth = window.document.documentElement.clientHeight + “”;
} else if (window.document != null && window.document.body != null && window.document.body.offsetHeight != null) {
winHeight = window.document.body.offsetHeight + “”;
}
|
결과값은 “10px” 처럼 문자열 형태로 리턴된다. 순수한 숫자를 얻고 싶다면 문자열 “px”를 떼고 parseInt를 적용해야 한다. (함수 getNumberFromPixel)
위 코드에 이어서 쓸 수 있는 함수로는 getNumberFromPixel 이 있다.
https://blog.naver.com/bb_/221781978397
