[javascript] 장치의 웹페이지 출력 해상도 확인하기 (스마트폰 등)

스마트폰 아니 스마트패드 등을 위한 웹페이지를 만들때 화면크기에 따른 처리가 필요합니다.

물론 미디어 쿼리등을 이용할 수 있지만 자바스크립트로 애니메이션등을 구현할때는 해당 장치의 정확한 출력 해상도를 알아야만 하지요.

아래의 코드로 출력 해상도를 알 수 있습니다.

if( typeof( window.innerWidth ) == 'number' ) { 

devWidth = window.innerWidth;

devHeight = window.innerHeight;

}

else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {

devWidth = document.documentElement.clientWidth;

devHeight = document.documentElement.clientHeight; 

}

else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {

devWidth = document.body.clientWidth;

devHeight = document.body.clientHeight; 

}

devWidth 와 devHeight 를 이용해 애니메이션 이나 화면 구성 등을 처리 하시면 되겠습니다.