jquery를 사용하여 스크롤바가 없는 브라우저 뷰포트의 높이와 너비를 가져오시겠습니까?
jQuery를 사용하여 스크롤바가 없는 브라우저 뷰포트의 높이와 너비를 얻으려면 어떻게 해야 합니까?
제가 지금까지 시도한 것은 다음과 같습니다.
var viewportWidth = $("body").innerWidth();
var viewportHeight = $("body").innerHeight();
이 솔루션은 브라우저 스크롤 막대를 고려하지 않습니다.
$(window).height();
$(window).width();
추가 정보
그러나 이러한 값을 얻으려면 jQuery를 사용하는 것이 필수적이지 않습니다.
document.documentElement.clientHeight;
document.documentElement.clientWidth;
스크롤 막대를 제외한 크기를 가져오려면, 또는
window.innerHeight;
window.innerWidth;
스크롤 막대를 포함하여 전체 뷰포트를 가져옵니다.
document.documentElement.clientHeight <= window.innerHeight; // is always true
jQuery를 사용하지 말고 javascript를 사용하면 올바른 결과를 얻을 수 있습니다.
여기에는 스크롤 막대 너비/높이가 포함됩니다.
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
alert('viewport width is: '+ windowWidth + ' and viewport height is:' + windowHeight);여기에는 스크롤 막대 너비/높이가 제외됩니다.
var widthWithoutScrollbar = document.body.clientWidth;
var heightWithoutScrollbar = document.body.clientHeight;
alert('viewport width is: '+ widthWithoutScrollbar + ' and viewport height is:' + heightWithoutScrollbar);다음은 대부분의 브라우저(FF, Cr, IE6+)에서 작동하는 일반 JS입니다.
var viewportHeight;
var viewportWidth;
if (document.compatMode === 'BackCompat') {
viewportHeight = document.body.clientHeight;
viewportWidth = document.body.clientWidth;
} else {
viewportHeight = document.documentElement.clientHeight;
viewportWidth = document.documentElement.clientWidth;
}
메서드 호출을 잘못 사용하고 있습니다.뷰포트는 문서에 열려 있는 "창"입니다. 얼마나 많이 볼 수 있고 어디서 볼 수 있는지 말입니다.
용사를 합니다.$(window).height()뷰포트 크기를 제공하지 않습니다. 그러면 전체 창의 크기가 표시됩니다. 이는 일반적으로 문서가 더 클 수 있지만 전체 문서의 크기입니다.
실제 뷰포트 크기를 가져오려면 및 를 사용합니다.
https://gist.github.com/bohman/1351439
메서드를 를 들어, "jQuery"는 "jQuery"$(window).innerHeight()이것들이 잘못된 번호를 주기 때문에.그들은 당신에게 창문의 높이를 주지 않습니다.innerHeight.
묘사
다음은 브라우저 뷰포트의 크기를 보여줍니다.
샘플
$(window).height(); // returns height of browser viewport
$(window).width(); // returns width of browser viewport
추가 정보
Kyle이 제안한 대로 스크롤 막대의 크기를 고려하지 않고 클라이언트 브라우저 뷰포트 크기를 측정할 수 있습니다.
샘플(스크롤 막대가 없는 뷰포트 치수)
// First you forcibly request the scroll bars to hidden regardless if they will be needed or not.
$('body').css('overflow', 'hidden');
// Take your measures.
// (These measures WILL NOT take into account scroll bars dimensions)
var heightNoScrollBars = $(window).height();
var widthNoScrollBars = $(window).width();
// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');
또는 스크롤 막대의 크기를 고려하여 클라이언트 뷰포트의 치수를 찾으려면 아래 샘플이 가장 적합합니다.
먼저 측정이 정확한지 확인하기 위해 신체 태그를 너비와 높이의 100%로 설정하는 것을 잊지 마십시오.
body {
width: 100%; // if you wish to measure the width and take into account the horizontal scroll bar.
height: 100%; // if you wish to measure the height while taking into account the vertical scroll bar.
}
샘플(스크롤 막대가 있는 뷰포트 치수)
// First you forcibly request the scroll bars to be shown regardless if they will be needed or not.
$('body').css('overflow', 'scroll');
// Take your measures.
// (These measures WILL take into account scroll bars dimensions)
var heightWithScrollBars = $(window).height();
var widthWithScrollBars = $(window).width();
// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');
»$(window).height() 높이가 ). 예: 다음과 doctype "Doctype"("Doctype"), "doctype").
html5의 경우:<!doctype html>
전환 html4의 경우:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
아마도 일부 브라우저에서 가정하는 기본 doctype은 다음과 같습니다.$(window).height()브라우저의 높이가 아닌 문서의 높이를 사용합니다.doctype 사양을 사용하면 만족스럽게 해결할 수 있으며, pep는 "스크롤 오버플로를 숨긴 다음 뒤로 변경"하는 것을 피할 수 있을 것이라고 확신합니다. 죄송합니다. 특히 향후 프로그래머의 사용을 위해 코드에 문서화하지 않으면 더욱 그렇습니다.
또한 스크립트를 수행하는 경우 라이브러리의 프로그래머를 돕기 위한 테스트를 발명할 수 있습니다. 몇 가지를 발명해 보겠습니다.
$(document).ready(function() {
if(typeof $=='undefined') {
alert("Error, you haven't called JQuery library");
}
if(document.doctype==null || screen.height < parseInt($(window).height()) ) {
alert("ERROR, check your doctype, the calculated heights are not what you might expect");
}
});
$(document).ready(function() {
//calculate the window height & add css properties for height 100%
wh = $( window ).height();
ww = $( window ).width();
$(".targeted-div").css({"height": wh, "width": ww});
});
jQuery 사용 중...
달러(약)키 1,000 & 달러(약 1,000원)height(높이)는 동일한 값을 반환합니다...스크롤이 없도록 신체의 패딩과 여백을 재설정하는 것이 핵심입니다.
<!--
body {
padding: 0px;
margin: 0px;
position: relative;
}
-->
이게 도움이 되길 바랍니다.
저는 폭 화면과 작은 화면을 위해 제 웹사이트의 다른 모습을 원했습니다.나는 2개의 CSS 파일을 만들었습니다.자바에서는 화면 너비에 따라 2개의 CSS 파일 중 어떤 것을 사용할지 선택합니다.저는 PHP 기능을 사용합니다.echo의 내부에echo-javascript를 기능합니다.
나의 비밀번호<header>내 PHP 파일의 섹션:
<?php
echo "
<script>
if ( window.innerWidth > 400)
{ document.write('<link href=\"kekemba_resort_stylesheetblog-jun2018.css\" rel=\"stylesheet\" type=\"text/css\">'); }
else
{ document.write('<link href=\"kekemba_resort_stylesheetblog-jun2018small.css\" rel=\"stylesheet\" type=\"text/css\">'); }
</script>
";
?>
언급URL : https://stackoverflow.com/questions/8794338/get-the-height-and-width-of-the-browser-viewport-without-scrollbars-using-jquery
'programing' 카테고리의 다른 글
| 측정 시 사용자 정의 보기 설명 (0) | 2023.08.27 |
|---|---|
| Rest api - 단일 리소스 필드 업데이트 (0) | 2023.08.27 |
| Spring MVC - 날짜 필드 바인딩 (0) | 2023.08.27 |
| XMLHttpRequest.responseType 설정이 갑자기 금지되었습니까? (0) | 2023.08.22 |
| 하위 요소에 영향을 주지 않고 배경 이미지의 불투명도 설정 (0) | 2023.08.22 |