Question

我想检测屏幕宽度变为低于1120时的点，然后触发一段代码，但仅在屏幕大小超过该点时执行。我不希望在从例如1000到999的变化时运行代码。仅从1121到1120.

Answer 1

您可以使用.resize（）事件

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

Answer 2

如果您正在寻找一种现代化的方法，那么匹配媒体：

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 3

这会做你想要的吗？

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

Answer 4

为了确保每次调整浏览器大小时代码都不会运行，但只有当它的分辨率高于或低于1200px时才能运行，你可以使用布尔（true / false）标志只在其值需要时运行代码改变，在这种情况下是under1200变量。

如果您使用此代码，则不需要库。

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

Answer 5

这里有一个简单的代码：

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

检测屏幕尺寸变化点

5 个答案: