Question

对于我的网站，我正在使用以下代码：

$(window).resize(function (event) {
    window.location.reload();
});

不幸的是，在移动设备上使用网站时，会发生微小的调整大小事件。我想设置一个公差，以便这些微小的更改不会触发此重新加载。为此，我需要知道在resize事件中发生的尺寸更改。我一直在看event对象，但是它又大又丑。

预先感谢：）

Answer 1

您可以通过跟踪原始窗口尺寸，然后将这些尺寸与当前尺寸（在每次调整大小事件期间获取）进行比较以确定变化量来实现。

以下内容显示了当宽度改变一定的THRESHOLD总金额时如何触发重新加载：

var THRESHOLD = 50; // the threshold that must be exceeded to trigger reload

$(window).resize(function(e) {

  var width = $(window).width();

  // Record the starting window width that the comparison will
  // be relative to
  if(window.startWidth == undefined) {
    window.startWidth = width;
  }

  // Calculate the total change since first resize event
  var widthChange = Math.abs(width - window.startWidth);

  // If change exceeds THRESHOLD, trigger reload
  if(widthChange > THRESHOLD) {
    window.location.reload();
  }

})

Answer 2

在JBDouble05的有用评论和Dacre Denny的有用答案的基础上，我制定了适合自己需求的最终解决方案。这是希望将来能帮助其他人。

var OGwidth = $(window).width();
var OGheight = $(window).height();
var threshold = 50;
$(window).resize(function (e) {
    if (OGwidth < 768) {
        var newWidth = $(window).width();
        var newHeight = $(window).height();

        var widthChange = Math.abs(OGwidth - newWidth);
        var heightChange = Math.abs(OGheight - newHeight);

        if (widthChange > threshold || widthChange > threshold) {
            window.location.reload();
        }

    } else {
        window.location.reload();
    }
    //reset for next resize
    OGwidth = newWidth;
    OGheight = newHeight;
})

使用jQuery获取调整大小的尺寸更改

2 个答案: