IT박스

screen.availHeight와 window.height ()의 차이점

itboxs 2020. 12. 14. 07:59
반응형

screen.availHeight와 window.height ()의 차이점


내 브라우저 (Firefox)에서 다음 Javascript를 실행하고 있습니다.

  1. console.debug ( "화면 높이 ="+ screen.availHeight ); // 770 출력

  2. console.debug ( "창 높이 ="+ $ (window) .height () ); // outputs 210 (저는 jQuery도 사용하고 있습니다)

둘의 차이점은 무엇입니까? 770은 픽셀이고 210은 mm입니까?

마찬가지로, 내가 쓸 때 $(document).height()$(window).height(), 차이가있다. 그 이유는 무엇입니까?


window.outerHeight

화면의 창의 높이이며 페이지와 보이는 모든 브라우저의 막대 (위치, 상태, 책갈피, 창 제목, 테두리 등)를 포함합니다.

하지 jQuery의 같은 $(window).outerHeight().

window.innerHeight 또는 $(window).height()

웹 사이트를 표시하는 뷰포트의 높이입니다. 콘텐츠 만 표시하고 브라우저의 바는 없습니다.

document.body.clientHeight 또는 $(document).height()

뷰포트에 표시된 문서의 높이입니다. 이 높은 경우보다 $(window).height()당신은 스크롤바 문서를 스크롤 할 수.

screen.availHeight

브라우저의 막대를 포함하여 브라우저 창을 최대화 할 때 가질 수있는 높이입니다. 따라서 창이 최대화되면screen.availHeight === window.outerHeight

screen.height

단순히 화면의 해상도와 일치합니다. 1920 × 1080 화면에 그래서, screen.height될 것입니다 1080.

screen.availHeightscreen.heightWindows의 작업 표시 줄, OS X의 도크 및 메뉴 또는 Linux를 사용하는 경우 화면 상단 또는 하단에 고정 된 모든 항목과 같이 [ + 운영 체제 표시 줄]과 같습니다.

참고 URL : https://stackoverflow.com/questions/3044230/difference-between-screen-availheight-and-window-height

반응형