jquery $ (window) .width () 및 $ (window) .height ()는 뷰포트의 크기가 조정되지 않은 경우 다른 값을 반환합니다.

뷰포트 크기에 따라 요소 를 반복적으로 호출 $(window).width()하고 $(window).height()위치를 지정하고 크기를 조정 하는 jquery를 사용하여 사이트를 작성 중 입니다.

문제 해결 과정에서 뷰포트의 크기가 조정되지 않을 때 위의 jquery 함수에 대한 반복적 인 호출에서 약간 다른 뷰포트 크기 보고서가 표시된다는 것을 발견했습니다.

언제 이런 일이 발생하는지 아는 특별한 경우가 있는지, 아니면 이것이 바로 그런 것인지 궁금합니다. 보고 된 크기의 차이는 20px 이하입니다. Mac OS X 10.6.2의 Safari 4.0.4, Firefox 3.6.2 및 Chrome 5.0.342.7 베타에서 발생합니다. 다른 브라우저는 아직 테스트하지 않았습니다. 브라우저에 특정한 것으로 보이지 않기 때문입니다. 뷰포트 크기가 아닌 경우 차이가 무엇에 의존하는지 알아낼 수 없었는데 결과를 다르게 만드는 또 다른 요인이있을 수 있습니까?

모든 통찰력을 주시면 감사하겠습니다.

최신 정보:

그것은의 값없는 $(window).width()및 $(window).height()그 변화하고있다. 위의 값을 저장하는 데 사용하는 변수의 값입니다.

값에 영향을주는 것은 스크롤바가 아니며 변수 값이 변경 될 때 스크롤바가 나타나지 않습니다. 내 변수에 값을 저장하는 코드는 다음과 같습니다.

(이 모든 것은 $(document).ready())

// 처음에 변수를 다른 함수에서 볼 수 있도록 선언합니다. .ready()

var windowWidth = $(window).width(); //retrieve current window width
var windowHeight = $(window).height(); //retrieve current window height
var documentWidth = $(document).width(); //retrieve current document width
var documentHeight = $(document).height(); //retrieve current document height
var vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
var hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position


function onm_window_parameters(){ //called on viewer reload, screen resize or scroll

    windowWidth = $(window).width(); //retrieve current window width
    windowHeight = $(window).height(); //retrieve current window height
    documentWidth = $(document).width(); //retrieve current document width
    documentHeight = $(document).height(); //retrieve current document height
    vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
    hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position

}; //end function onm_window_parameters()

위의 변수가 보유해야하는 값에 대해 조사하기 위해 경고문을 삽입했습니다. $(item).param()값은 일관성 유지,하지만 내 변수 내가 알아낼 수 없습니다 이유로 변경합니다.

내 코드가 문제의 변수 값을 변경할 수있는 곳을 찾았습니다. 단지 설정 값을 검색하고 아무것도 찾을 수 없습니다. 가능성이 있다면 어딘가에 shebang 전체를 게시 할 수 있습니다.

당신이보고있는 것은 스크롤바를 숨기고 보여주는 것이라고 생각합니다. 다음은 너비 변경을 보여주는 간단한 데모 입니다.

제쳐두고 : 지속적으로 설문 조사를해야합니까? 다음과 같이 resize 이벤트에서 실행되도록 코드를 최적화 할 수 있습니다.

$(window).resize(function() {
  //update stuff
});

사용하려고

• $(window).load 행사

또는

• $(document).ready

  구문 분석 중 또는 DOM로드 중에 발생하는 변경으로 인해 초기 값이 일정하지 않을 수 있기 때문입니다.

스크롤바가 나타나서 문제가 발생한 경우

body {
  overflow: hidden;
}

CSS에서 쉽게 수정할 수 있습니다 (스크롤 할 페이지가 필요하지 않은 경우).

나는 매우 비슷한 문제를 겪고 있었다. 페이지를 새로 고칠 때 높이 () 값이 일관되지 않았습니다. (문제를 일으키는 변수가 아니라 실제 높이 값이었습니다.)

내 페이지 헤드에서 스크립트를 먼저 호출 한 다음 내 CSS 파일을 호출했음을 알았습니다. CSS 파일이 먼저 연결되고 스크립트 파일이 연결되도록 전환했는데 지금까지 문제가 해결 된 것 같습니다.

도움이 되었기를 바랍니다.