Question

我有这段代码

$(document).ready(function(){
    var oldwidth= $(window).width();
    $(window).resize(function(){
    var nw= $(window).width();

  //compare new and old width      
    });
});

问题是旧宽度仅在加载文档时设置，每次调整大小时新宽度都会更改。我希望在调整大小之前得到宽度，这样我就可以检查用户是在减小宽度还是增加屏幕宽度。

Answer 1

在resize()处理程序中，使用新宽度作为函数的最后一行更新oldwidth。

$(document).ready(function () {
    var oldwidth = $(window).width();
    $(window).resize(function () {
        var nw = $(window).width();
        //compare new and old width      
        oldwidth = nw;
    });
});

Answer 2

调整事件检测大小，登录停止调整大小：

function resize_event_analysis()
{
var resized_to;
//On resize events
$(window).resize(function()
{
    clearTimeout(resized_to);
    resized_to = setTimeout(function() {
        var now = new Date();
        now.toString('yyyy-MM-dd, hh:mm:ss');;
        var dwidth = "Device width = " + window.screen.width;
        var swidth = "Window width = " + $(document).width();

        console.log("Resize detected successfully - " + now);
       console.log(dwidth);
       console.log(swidth);
    }, 100);
});

呼叫如：。

$(document).ready(function() {
   resize_event_analysis();
});

Answer 3

之前的解决方案仅在您第一次加载页面时起作用，但如果您调整浏览器的大小，则不再计算它，因此我对整个问题的解决方案是：

在我的母版页上，我得到了初始尺寸：

$(document).ready(function () {
    var oldWidth = $(window).width();
});

然后在resize事件中我们这样做：

$(window).resize(function () {
   if ($(window).width() != oldWidth) {
      // do whatever we want to do
      // update the size of the current browser (oldWidth)
         oldWidth = $(window).width();
   }
});

如何在页面每次调整大小之前获得屏幕宽度？

3 个答案: