0

我正在开发一个响应式网站，并且我有一些标签可以在小屏幕上从标签变为手风琴。这是我目前的做法：

var myGlobalVariable = {};

$(window).resize(function(e) {
    duringResize();
    myGlobalVariable.windowWidth = window.innerWidth;
});

function widthHasChanged() {
    return window.innerWidth !== myGlobalVariable.windowWidth;
}

function duringResize() {
    if(widthHasChanged()) {
        if(Modernizr.mq('all and (min-width:1000px)')) {
            /* Do stuff for tabs */
        } else {
            /* Do stuff for accordion */
        }
    }
}

我对此不满意，因为我不得不使用全局变量来存储浏览器窗口的最后一个宽度，以检查宽度是否发生了变化。

我要这样做的原因是因为在手机上时，当标签在手风琴模式下，单击一个实际上会使文档更高以适应标签内容。出于某种原因，这被归类为调整大小，即使“窗口”在移动设备上的大小仍然相同。这意味着即使宽度没有改变，我的标签/手风琴代码也会被调用，这把事情搞砸了。

有什么我遗漏的，还是这是实现这一目标的唯一方法？欢迎使用 jQuery 和 vanilla javascript 解决方案。

4

1 回答 1

1

没有特定事件可以绑定到窗口宽度更改。您的解决方案对我来说看起来不错。

我能想到的唯一另一种方法是在计时器内定期检查 $(window).width 。我认为总的来说，单个全局变量更可取:)

于 2013-03-08T14:05:18.623 回答