web-dev-qa-db-ja.com

画面解像度が変更された場合、jqueryで検出する方法は？

ユーザーが画面解像度のサイズを変更するたびに[ブラウザウィンドウではなく]、ページが機能を実行するようにするにはどうすればよいですか？

jqueryscreenscreen-resolution
30
Safran Ali

さて、jQueryを使用しています。それでは、カスタムイベントを作成しましょう。

_(function () {
    var width = screen.width,
        height = screen.height;
    setInterval(function () {
        if (screen.width !== width || screen.height !== height) {
            width = screen.width;
            height = screen.height;
            $(window).trigger('resolutionchange');
        }
    }, 50);
}());
_

これで$(window).bind('resolutionchange', fn)はあなたが望むことをするはずです。

36
Nathan MacInnes

$(window).resize()

http://api.jquery.com/resize/

$(window).resize(function() {

alert('window was resized!');

});
17
Benno

_screen.width_および_screen.height_を追跡してみてください。画面の解像度を変更すると、異なる値が返されます。詳細 こちら 。

_function doSomething(){
    if ( screen.width < 1280 ){
        console.log('Too small')
    }else{
        console.log('Nice!')
    }
}
_

ただし、私の知る限り画面解像度の変更時にトリガーされるイベントはありません。つまり、これはできません$(screen).resize(function(){/*code here*/});

別の方法として、[not Recommended]などのsetTimeout()を使用します。

_var timer,
    checkScreenSize = function(){
        if ( screen.width < 1280 ){
            console.log('Too small')
        }else{
            console.log('Nice!')
        }
        timer = setTimeout(function(){ checkScreenSize(); }, 50);
    };

checkScreenSize();
_

recommendedバージョンは requestAnimationFrame を使用します。 here Paul Irishが説明したとおり。表示されていないタブでループを実行している場合、ブラウザーはループを実行し続けないためです。全体的なパフォーマンスを向上させるため。

_// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();


// usage: 
// instead of setInterval(checkScreenSize, 50) ....

(function loop(){
  requestAnimFrame(loop);
  checkScreenSize();
})();
_

[更新]

Nathan's answer でrequestAnimationFrameを実装する場合は、そこに行きます。解像度の変更でトリガーされるカスタムjQueryイベントは、利用可能な場合にrequestAnimationFrameを使用してメモリ使用量を削減します。

_window.requestAnimFrame = (function(){
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };
})();

var width = screen.width,
    height = screen.height,
    checkScreenSize = function () {
        if (screen.width !== width || screen.height !== height) {
            width = screen.width;
            height = screen.height;
            $(window).trigger('resolutionchange');
        }
    };

(function loop(){
  requestAnimFrame(loop);
  checkScreenSize();
})();
_

使用法：

_$(window).bind('resolutionchange', function(){
    console.log('You have just changed your resolution!');
});
_
9
Pierre

特定のブラウザウィンドウ内からしか同じブラウザウィンドウ内の変更をチェックできないため、ディスプレイの解像度の変更について知ることはできません。

ただし、ディスプレイの解像度が変更されたときにブラウザーウィンドウも変更された場合は、window.widthおよびwindow.heightのリスナーでこれをキャッチできます。

編集：グローバルな 'window.screen'オブジェクトから必要な情報を取得できるようです。 https://developer.mozilla.org/en/DOM/window.screen.height および https://developer.mozilla.org/en/DOM/window.screen。 width 詳細については！

3
Willem Mulder

このjsを試してください：

var width = $(window).width();
var height = $(window).height(); 
var screenTimer = null;

function detectScreen (){
    $(window).resize(function() {
      height = $(window).height(); 
      width = $(window).width(); 
        getScreen ();
    });

    function getScreen (){
        return { 'height' : getHeight (), 'width': getWidth () };
    }
    screenTimer = setInterval ( getScreen (), 50 );
}
function getHeight (){
    console.log ( 'height: ' + height);
    $('#height').text(height);
    return height;
}
function getWidth (){
    console.log ( 'width: ' + width);
    $('#width').text(width);
     return width;   
}
detectScreen ();

$('#go').click (function (){
    detectScreen ();
});

$('#stop').click (function (){
    clearInterval(screenTimer);
});

そしてhtmlの場合：

<span id="stop">Stop</span> | <span id="go">Go</span>
<br>
<div>height: <span id="height"></span> px</div>
<div>width: <span id="width"></span>px </div>
2
Arnaud Méhat

次の関数は、ウィンドウのサイズ変更と解像度の変更で起動し、ユーザーがウィンドウのサイズを変更している間の複数の呼び出しを回避するための遅延もあります。

ここであなたのためにフィドルを設定しました：

http://jsfiddle.net/EJK5L/

解像度と機能を変更すると警告が表示されます。必要な機能を実行できます。

お役に立てれば。

1
AlphaMale