source

jquery $($)너비 () 및 $($).viewport 크기가 조정되지 않은 경우 height(높이)는 다른 값을 반환합니다.

nicesource 2023. 9. 6. 22:09
반응형

jquery $($)너비 () 및 $($).viewport 크기가 조정되지 않은 경우 height(높이)는 다른 값을 반환합니다.

전화를 반복하는 jquery를 이용하여 사이트를 작성하고 있습니다.$(window).width()그리고.$(window).height()뷰포트 크기에 따라 요소를 배치하고 크기를 조정합니다.

문제 해결 과정에서 뷰포트 크기가 조정되지 않은 경우 위 jquery 함수에 대한 반복 호출에서 뷰포트 크기 보고서가 조금씩 달라지는 것을 발견했습니다.

이런 일이 일어날 때 누군가가 알고 있는 특별한 경우가 있는지, 아니면 이런 경우가 있는지 궁금합니다.보고된 크기 차이가 20px 이하인 것으로 나타났습니다.Mac OS X 10.6.2의 사파리 4.0.4, Firefox 3.6.2 및 Chrome 5.0.342.7 베타에서 발생합니다.아직 다른 브라우저는 브라우저에 특화된 것 같지 않아서 테스트를 안 해봤어요.또한 뷰포트 크기가 아니면 결과가 달라지는 또 다른 요인이 있을 수 있을까요?

어떤 통찰이라도 감사히 받겠습니다.


업데이트:

그것은 가치가 아닙니다.$(window).width()그리고.$(window).height()변화하고 있습니다.위의 값을 저장하기 위해 사용하는 변수의 값입니다.

값에 영향을 미치는 것은 스크롤 막대가 아니며 변수 값이 변경될 때 스크롤 막대가 나타나지 않습니다.값을 변수에 저장하는 코드는 다음과 같습니다(값이 더 짧도록 제가 하고 있습니다).

(이 모든 것은 안에 있습니다.$(document).ready())

//views는 변수를 내부의 다른 함수에 표시할 것을 선언합니다..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()값은 일정하게 유지되지만 변수는 제가 알 수 없는 이유로 바뀝니다.

제 코드가 문제의 변수 값을 변경할 수 있는 곳을 찾아봤는데, 단순히 설정된 값을 검색하는 것이 아니라 아무 것도 찾을 수 없습니다.가능성이 있다면 쉐뱅 전체를 어딘가에 올릴 수 있습니다.

지금 보시는 것은 스크롤 바의 숨김과 보여주기라고 생각합니다.폭의 변화를 보여주는 간단한 데모가 있습니다.

부차적으로: 당신은 지속적으로 여론조사를 할 필요가?다음과 같이 코드를 최적화하여 크기 조정 이벤트에서 실행할 수 있습니다.

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

a를 사용해 봅니다.

  • $(window).load이벤트성

아니면

  • $(document).ready

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

스크롤 바가 나타나서 문제가 발생하는 경우, 퍼팅하기

body {
  overflow: hidden;
}

CSS에 있는 것이 쉬운 수정일 수도 있습니다(스크롤할 페이지가 필요하지 않다면).

저도 아주 비슷한 문제를 겪고 있었습니다.페이지를 새로 고쳤을 때 높이 값이 일치하지 않았습니다.(문제를 일으킨 것은 제 변수가 아니라 실제 높이 값이었습니다.)

페이지 머리 부분에서 먼저 스크립트를 호출한 다음 CSS 파일을 호출한 것을 확인했습니다.CSS 파일을 먼저 링크하고 스크립트 파일을 연결하여 지금까지 문제를 해결한 것 같습니다.

도움이 되길 바랍니다.

언급URL : https://stackoverflow.com/questions/2596594/jquery-window-width-and-window-height-return-different-values-when-vie

반응형