[Javascript] 브라우저 창 크기 구하기

1. 요청사항

현재 보고 있는 페이지의 크기에 따라 페이징의 형태가 변하도록 구현해 달라는 요청을 받았다

다시 말하면 현재 창의 크기가 1025px를 넘으면(데스크톱) 페이징 개수를 10개로, 그 이하면(모바일) 5개로 구현하는 방식이다.

이를 웹 브라우저로 실행된 창의 크기에 따라 페이징 구현 방식을 다르게 해 달라는 것으로 이해했다.

이를 위해 자바스크립트를 통해 윈도우 창 크기를 구하는 방법에 대해 공부했다.

 

2. 에러사항

사실 백엔드 개발자라 자바단에서 창 크기를 구하는 방법을 찾고 있었는데, 자바에서 브라우저 창 크기를 구하는 방법을 찾지 못했다.

게다가 단순히 창 크기를 구하기 위해서 자바단을 건드리기보단 프런트단에서 해결하고 싶었다.

대신 자바로 접근장치(pc인지 모바일인지), 운영체제, 브라우저 정보 등을 구할 수 있는 방법들은 존재해서 추후에 사용할 일이 있으면 사용해보려고 한다.

JAVA 접근장치, 운영체제, 브라우저 확인

 

[JAVA] 브라우저 및 OS정보 얻는 방법!!

3. 윈도우 창 크기 구하기

결국 자바로 구하기보다는 자바스크립트로 구하는 방법이 더 간편함을 알았다.

 

window.innerWidth, $(window).width() : 브라우저 화면의 너비
window.innerHeight, $(window).height()  : 브라우저 화면의 높이
window.outerWidth : 브라우저 전체의 너비
window.outerHeight : 브라우저 전체의 높이

브라우저 창의 어디까지 범위를 구할 것인지 잘 보고 선택해야 한다.

"Window()의 가로 크기 : " + $(window).width();
"Window()의 세로 크기 : " + $(window).height();
"innerWidth의 크기 : " + window.innerWidth;
"innerHeight의 크기 : " + window.innerHeight;
"outerWidth의 크기 : " + window.outerWidth;
"outerHeight의 크기 : " + window.outerHeight;

이런 식으로 구해서 사용할 수 있었다.

https://jamesyleather.tistory.com/281

[Javascript] 윈도우 창 크기 구하기

https://zzznara2.tistory.com/622

[자바스크립트] 브라우저 크기(너비, 높이) 및 브라우저 화면 사이즈

잘못된 내용이 있다면 지적부탁드립니다. 방문해주셔서 감사합니다.