Detect Punkt der Bildschirmgröße ändert

Question

Ich möchte den Punkt erkennen, wenn die Bildschirmbreite unter 1120 ändert, und feuern einen Teil des Codes, aber nur tun, wenn die Bildschirmgröße diesen Punkt passiert. Ich will nicht, um den Code auszuführen, wenn eine Änderung von ist, beispielsweise 1000 bis 999. Nur von 1121 bis 1120.

Answer 1

Um sicherzustellen, dass der Code nicht jedes Mal, wenn Ihr Browser verkleinert, aber nur läuft, wenn es über oder unter 1200px Auflösung ändert, können Sie eine boolean (true/false) Flag verwenden, eine nur Ihren Code ausführen wenn sein Wert geändert werden muss, in diesem Fall die Variable unter 1200.

Wenn Sie diesen Code verwenden, sind keine Bibliotheken erforderlich.

var under1200=false; 
 
    if(window.innerWidth<1200){ 
 
    \t under1200=true; 
 
    } 
 
    window.onresize = function(event) { 
 
    \t if(under1200 == false && window.innerWidth<=1200){ 
 
    \t \t console.log("Size under 1200"); 
 
    \t \t under1200=true; 
 
    \t \t 
 
    \t \t //YOUR CODE FOR LESS THAN 1200px HERE 
 
    \t } 
 
    \t if(under1200 == true && window.innerWidth>1200){ 
 
    \t \t console.log("Size over 1200"); 
 
    \t \t under1200=false; 
 
    \t \t 
 
    \t \t //YOUR CODE FOR +1200px HERE 
 
    \t } 
 
    }

Answer 2

Sie die .resize verwenden können() Ereignis

$(window).on('resize', function(){ 
    var win = $(this); 
    if (win.width() >= 1120) { 
     /* ... */ 
    } 
}); 

Answer 3

Wenn Sie Matchmedia ist für einen modernen Ansatz sucht, ist es:

var matched = false; 

// media query event handler 
if (matchMedia) { 
    var mq = window.matchMedia("(min-width: 1120px)"); 
    mq.addListener(WidthChange); 
    WidthChange(mq); 
} 

// media query change 
function WidthChange(mq) { 
    if (mq.matches) { 
    // window width is at least 1120px 
    matched = false; // Reset match flag 
    } else { 
    // window width is less than 1120px 
    if(!matched) { 
     // Do your logic here 
    } 

    matched = true; 
    } 

} 

(siehe https://www.sitepoint.com/javascript-media-queries/)

Die meisten Browser zu unterstützen scheinen: http://caniuse.com/#feat=matchmedia

Answer 4

Würde dies tun, was Sie suchen?

$(window).resize(function(){ 
    if (screen.width >= 1119 && screen.width <= 1120) { 
     // run code 
    } 
}) 

Answer 5

Hier haben Sie einen einfachen Code:

var detectSize = function() { 
    if (window.innerWidth == 1120 || window.innerWidth == 1121) { 
     console.log('youre code here'); 
    }; 
} 
detectSize(); 
window.addEventListener('resize', detectSize, false);