Определить точку изменения размера экрана

Question

Я хочу определить точку, когда ширина экрана изменяется ниже 1120, и запускать кусок кода, но только делать это, когда размер экрана проходит эту точку. Я не хочу, чтобы запустить код, когда происходит изменение от, например, 1000 999. Только с 1121 до 1120.

Answer 1

Чтобы убедиться, что ваш код не запускается каждый раз, когда ваш браузер изменяет размер, но только тогда, когда она изменяется выше или ниже разрешения 1200px, вы можете использовать логическое (истина/ложь) флаг единственный запустить свой код когда его значение должно измениться, в этом случае переменная under1200.

Библиотеки не требуются, если вы используете этот код.

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

Вы можете использовать .resize() событие

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

Answer 3

Если вы «ищет современный подход, есть matchMedia:

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; 
    } 

} 

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

Большинство броузеров поддерживают его: http://caniuse.com/#feat=matchmedia

Answer 4

Будет ли это делать то, что вы ищете?

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

Answer 5

Здесь у вас есть простой код:

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