51. (javascript/자바스크립트) screen 사용해 디스플레이, 브라우저, 실제 사용 가능 화면 크기 구하기 - screen.avail , window.outer

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : javascript

/* =========================== */

​

/* =========================== */

[소스 코드]

 

    <script>
    	/* 
    	[요약 설명]
    	1. screen 객체는 사용자의 디스플레이 화면에 대한 다양한 정보를 저장하는 객체입니다
    	2. screen 객체의 width와 height 프로퍼티는 사용자의 디스플레이 화면의 크기를 픽셀 단위로 반환합니다
    	3. screen.width와 screen.height는 현재 사용자의 모니터 화면의 크기를 반환합니다
    	4. window.outerWidth와 window.outerHeight는 현재 브라우저 창의 크기를 반환합니다
    	5. availWidth와 availHeight 는 실제 사용할 수 있는 화면의 크기를 픽셀 단위로 반환합니다 (운영체제의 작업 표시줄과 같은 공간을 모두 제외한 크기)    	
    	*/
    	    	
    	
    	/* 이벤트 함수 정의 */
    	function main() {
    		
    		/* screen 사용해 화면 정보 출력 실시 */
    		console.log("사용자 디스플레이 화면 너비 : " + screen.width + " px");
    		console.log("사용자 디스플레이 화면 높이 : " + screen.height + " px");
    		console.log("");
    		
    		console.log("현재 브라우저 창 너비 : " + window.outerWidth + " px");
    		console.log("현재 브라우저 창 높이 : " + window.outerHeight + " px");
    		console.log("");
    		
    		console.log("실제 사용할 수 있는 화면의 너비 : " + screen.availWidth + " px");
    		console.log("실제 사용할 수 있는 화면의 높이 : " + screen.availHeight + " px");
    		console.log("");
    		
    	};  	    	    	
    	
    </script>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[요약 설명]

1. screen 객체는 사용자의 디스플레이 화면에 대한 다양한 정보를 저장하는 객체입니다

2. screen 객체의 width와 height 프로퍼티는 사용자의 디스플레이 화면의 크기를 픽셀 단위로 반환합니다

3. screen.width와 screen.height는 현재 사용자의 모니터 화면의 크기를 반환합니다

4. window.outerWidth와 window.outerHeight는 현재 브라우저 창의 크기를 반환합니다

5. availWidth와 availHeight 는 실제 사용할 수 있는 화면의 크기를 픽셀 단위로 반환합니다 (운영체제의 작업 표시줄과 같은 공간을 모두 제외한 크기)

*/

/* =========================== */