본문 바로가기
프로그램

[활용팁] 자바스크립트 윈도우 창높이(Web Browser) 확인 방법

by 공공정보 2021. 5. 21.
728x90

레이어로 현재 화면에서 중앙에 자동으로 배열하고 싶어졌다...

그래서, 가로크기와 세로크기를 확인해야 할일이 생겨 높이와 폭을 확인해봤는데....

이상하게 가로는 그런데로 작동하는데 높이는 이상하게 숨어 있는 길이까지 나오는것이다...

뭐가 문제일까?

크롬이나 웨일은 이상하게 브라우저 창크기가 에러나는데, 익스플로러에서는 정상적으로 작동해서 크롬의 버그인줄 알았는데...

구글 검색을 해보니 상단의 태그 하나 추가하니 정상적으로 작동을 하네...

이 한줄의 태그만 넣어주면 정상적으로 작동을 한다...

<!doctype html>


브라우저 사이즈가 변경이 되어도 정 중앙을 계산을 할수 있을것 같다.

$( window ).height(); <- 윈도우 창의 높이 확인 코드
$( document ).height(); <- 문서 전체 높이 확인 코드
$( "#doc_main" ).height(); <- 해당 오프젝트 높이 확인 코드

window.screen.availHeight; or screen.availHeight; <- 화면의 최대로 키웠을때 높이(작업표시줄 제외)
window.screen.height; or screen.height; <- 모니터 해상도 높이

이렇게 많은 코드들 중에 내가 원했던 코드는

document.write("$( window ).width() :" + $( window ).width() + "<br>");
document.write("$( window ).height() :" + $( window ).height() + "<br>");

윈도우 창의 가로, 세로 크기 구하는 코드였다..

또한 동적으로 창 사이즈가 변경하는것까지 한다면 필히 상단에

<!doctype html>

태그는 필수!!

 


다음 동영상은 <!doctype html> 태그를 넣을때와 뺐을때의 같은 코드가 다른 결과가 나오는 현상을 보여준다.

 

GOMCAM 20210520_2253300965.mp4
2.23MB

 

동영상 업로드가 안되서 파일 업로드로 하네...

 

 

예제소스 파일첨부 다운로드

 

https://blog.naver.com/spprince/222359328503

 

#활용팁 #javascript #자바스크립트 #jQuery #높이확인

 


 

본 블로그의 글은 공공정보와 개인적 생각의 글 임을 알려드립니다.

또한 오류가 있는 부분이 있으면 댓글로 알려주시기 바랍니다.

 

감사합니다.

반응형

댓글