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

Question

jquery를 사용하여 $(window).width() 및 $(window).height()을 반복적으로 호출하여 사이트를 작성하고 뷰포트의 사이즈

문제 해결에서 뷰포트의 크기를 조정하지 않을 때 위 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()의 값이 변화되지 않습니다. 위의 값을 저장하기 위해 사용하는 변수의 값입니다.

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

// 처음에 내가 값에 대해 위의 변수를 조사하기 경고 문을 삽입 .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() 

내에서 기능을 otehr에 볼 수 있도록 변수를 선언 (이 모든 $(document).ready() 내에)들이 붙들려 야한다. $(item).param() 값은 일관성을 유지하지만 내 변수는 알아낼 수없는 이유로 변경됩니다.

나는 설정 값을 검색하는 대신 내 코드가 해당 변수의 값을 변경하는 위치를 찾고 아무 것도 찾을 수 없습니다. 그게 가능하다면 어딘가에서 전체를 게시 할 수 있습니다.

Answer 1

당신이보고있는 것은 스크롤바를 숨기고 보여주는 것입니다. Here's a quick demo showing the width change.

제쳐두고 : 계속 폴링해야합니까? 다음과 같이 resize 이벤트를 실행하도록 코드를 최적화 할 수 있습니다.

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

Answer 2

매우 비슷한 문제가있었습니다. 내 페이지를 새로 고침 할 때 높이() 값이 일치하지 않게되었습니다. (문제를 일으키는 변수가 아니기 때문에 실제 높이 값이었습니다.)

나는 내 페이지의 머리 부분에서 스크립트를 먼저 호출 한 다음 내 css 파일을 발견했습니다. 나는 css 파일이 먼저 링크 된 다음 스크립트 파일과 그 문제가 지금까지 해결 된 것으로 보인다.

희망이 있습니다.초기 값 때문에 해석 중에 발생할 변경 변덕 수 있기 때문에

Answer 3

시도는

• $(window).load 이벤트

또는

• $(document).ready

  를 사용 또는 동안 DOM로드.

Answer 4

참고 그 문제는 (스크롤 페이지가 필요하지 않은 경우) 쉽게 수정 될 수 귀하의 CSS에

body { 
    overflow: hidden; 
} 

을 가하고, 나타나는 스크롤바에 의해 발생되는 경우.