자바스크립트 브라우저 크기 및 브라우저 화면 사이즈

자바스크립트 브라우저 크기 및 브라우저 화면 사이즈

화면크기 웹브라우저의 크기에 따라 태그라던지 주변 요소들의 크기를 변경해야하는 경우가 상당히 많다. 
그때 웹브라우저의 크기를 알아보는 방법에 대해서 알아 보도록 하겠다.

 

브라우저의 크기를 확인 하기위한 4가지 명령어

 

브라우저의 크기를 확인 하기 위해서는 4가지 명령어만 알면 끝난다.
먼저 가로 사이즈는 아래 2가지 명령어를 확인해보자

 

가로사이즈

window.innerWidth  :  브라우저 표시화면의 너비
window.outerWidth  :  브라우저 전체의 너비

 

일반적으로는 innerWidth 를 많이 사용한다.
도대체가 텍스트로 표현하려니 생각보다 쉽지 않아서 
그림판에서 아래와 같이 그림을 그렸다.

 

세로사이즈

window.innerHeight : 브라우저 표시화면의 높이
window.outerHeight : 브라우저 전체의 높이

 

세로사이즈 또한 아래 그림을 참조 해보도록 하자

이해하는데 도움이 되셧나요?

 

브라우저 사이즈 구하는 방법

이렇게 해도 사이즈 구하는 방법을 모르겠다 하시면, 

아래 값을 그대로 붙여넣고 실행하면 값을 얻을수 있다.

 

document.write('innerWidth = ' + window.innerWidth  + 'px');
document.write('</br>');
document.write('outerWidth = ' + window.outerWidth  + 'px');
document.write('</br>');
document.write('innerHeight = ' + window.innerHeight  + 'px');
document.write('</br>');
document.write('outerHeight = ' + window.outerHeight + 'px');

 

예) A라는 사이트에 들어가서 현재상태의 브라우저 사이즈를 알고 싶다.

 

1. F12를 눌러 개발자 도구를 누른다.

2. Console tab 클릭

3. 표의 script 실행

 

또는 Html 파일을 아래와 같이 만들어서 테스트 해봐도 됩니다.

테스트 파일 첨부 해놓습니다.

Test.html

0.00MB

 

 

 

다른 재미있는 자바스크립트 포스팅 보기

 

 

자바스크립트 eval, JSON.parse 파싱

 

 

자바스크립트 escape, encodeURI, encodeURIComponent 차이점

 

 

javascript 정규표현식 공백 제거 하기 ( space 제거 )

 

 

자바스크립트 ES6 block scope