web-dev-qa-db-ja.com

jQuery：その場でウィンドウ幅を検出する方法は？

ページにスクロール要素があります（jScrollPane jQueryプラグインを使用）。私が達成したいのは、ブラウザウィンドウの幅を検出することでスクロールウィンドウをオフにする方法です。レスポンシブレイアウトを行っていますが、ブラウザが特定の幅を下回ったときにこのスクロール機能をオフにする必要があります。ページを更新すると機能するようになりましたが、ブラウザウィンドウのサイズを変更しても、幅の値はその場で更新されません。

現在、幅が1000ピクセルのウィンドウで開始し、350ピクセルにサイズ変更すると、スクロール機能が残ります。ブラウザの幅が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
    });
}
javascriptjqueryresponsive-design
67
Dustin

変数を変更しても、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);
});
145
Rob W

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
      });
  }
});
16
antyrat

以下は、画面サイズが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);
});
0
li bing zhao

ページのサイズを変更するときにこれが役立つかどうかはわかりません：

$(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%");
       }
    });
0
Dinnu Buddy