jQuery: 창 너비를 즉시 감지하는 방법은 무엇입니까?

jQuery: 창 너비를 즉시 감지하는 방법은 무엇입니까?

내 페이지에 스크롤 요소가 있습니다(jScrollPanejQuery 플러그인 포함).내가 이루고 싶은 것은 브라우저 창의 너비를 감지하여 스크롤 창을 끄는 방법입니다.저는 반응형 레이아웃을 하고 있고 브라우저가 일정 폭 이하일 때 이 스크롤 기능을 끄길 원합니다.페이지를 새로 고치면 작동할 수 있지만 브라우저 창 크기를 조정하면 너비 값이 즉시 업데이트되지 않습니다.

지금 당장 1000px 너비의 창에서 시작해서 350px 크기로 조정하면 스크롤 기능이 남아있습니다.브라우저 폭이 440px가 되면 바로 스크롤 기능이 꺼졌으면 좋겠습니다.

제가 지금까지 가지고 있는 암호는 이렇습니다.

var windowsize = $(window).width();

$(window).resize(function() {
  var windowsize = $(window).width();
});

if (windowsize > 440) {
  //if the window is greater than 440px wide then turn on jScrollPane..
    $('#pane1').jScrollPane({
       scrollbarWidth:15, 
       scrollbarMargin:52
    });
}

변수를 변경해도 마법처럼 코드가 실행되지 않습니다.if-block. 함수에 공통 코드를 넣고 이벤트를 바인딩한 다음 함수를 호출합니다.

$(document).ready(function() {
    // Optimalisation: Store the references outside the event handler:
    var $window = $(window);
    var $pane = $('#pane1');

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize > 440) {
            //if the window is greater than 440px wide then turn on jScrollPane..
            $pane.jScrollPane({
               scrollbarWidth:15, 
               scrollbarMargin:52
            });
        }
    }
    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});

if 조건을 안에 넣습니다.resize함수:

var windowsize = $(window).width();

$(window).resize(function() {
  windowsize = $(window).width();
  if (windowsize > 440) {
    //if the window is greater than 440px wide then turn on jScrollPane..
      $('#pane1').jScrollPane({
         scrollbarWidth:15, 
         scrollbarMargin:52
      });
  }
});

아래는 화면 크기가 768px 이하일 때 Id 요소를 숨기고, 768px 이상일 때 표시하는 방법입니다.효과가 좋습니다.

var screensize= $( window ).width();

if(screensize<=768){
        if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').css('display','none');
            }
}
else{
        if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').removeAttr( "style" );
            }

}
changething = function(screensize){
        if(screensize<=768){
            if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').css('display','none');
            }
        }
        else{
        if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').removeAttr( "style" );
            }

        }
}
$( window ).resize(function() {
 var screensize= $( window ).width();
  changething(screensize);
});

페이지 크기를 조정할 때 유용한지 모르겠습니다.

$(window).resize(function() {
       if(screen.width == window.innerWidth){
           alert("you are on normal page with 100% zoom");
       } else if(screen.width > window.innerWidth){
           alert("you have zoomed in the page i.e more than 100%");
       } else {
           alert("you have zoomed out i.e less than 100%");
       }
    });

언급URL : https://stackoverflow.com/questions/9720294/jquery-how-to-detect-window-width-on-the-fly