Javascript 仅在调整窗口宽度时调用jquery函数

我有一个功能

responsive

，可以改变我网站上某些元素的行为，包括隐藏弹出窗口等。我在两种情况下称之为：

$(document).ready(responsive);
$(window).resize(responsive);

这个问题发生在android chrome上，因为虚拟键盘实际上改变了屏幕的高度，并触发了

响应

功能，关闭了我的弹出窗口（其中一些有文本字段，无法键入）

我怎样才能防止这种情况发生？我在某个地方读到一个好的观点，android虚拟键盘只改变屏幕的高度，而不是宽度，所以我认为比较调整大小前后的宽度是个好主意。因此，我创建了这个函数来比较前后的宽度，如果宽度不同，则运行

resize（）

，但它不能按预期工作，控制台日志显示不同的文档宽度，即使我只更改了屏幕的高度（使用chrome developer工具）

知道哪里出了问题，或者我如何防止在高度变化时启动功能

responsive

function resizeWidth() {
    var existingWidth = $(document).width();

    $(window).resize(function() {
        var newWidth = $(document).width();
        if (existingWidth != newWidth) {
            $(window).resize(responsive);
            console.log(existingWidth);
            console.log(newWidth);
        };
    });
};

$(window).resize(resizeWidth);

---

首先，要多次将处理程序附加到

resize

事件。一个加载，然后每次调整大小时另一个加载，并调用

resizeWidth

。您应该删除该函数中的处理程序。另外，我猜您只想调用

responsive（）

函数，而不是在宽度更改时附加另一个调整大小处理程序

您面临的主要问题是

existingWidth

的范围不够小，无法在多个事件中看到它。你可以让它全球化，尽管这通常被认为是不好的做法。相反，您可以使用

data

属性，如下所示：

function resizeWidth() {
    var existingWidth = $(document).data('resize-width');
    var newWidth = $(document).width();
    if (existingWidth != newWidth) {
         responsive();
         $(document).data('resize-width', newWidth);
    };
};

$(window).resize(resizeWidth);

---

马上，我注意到在从另一个$（window）.resize（）调用的函数中有$（window）.resize（）。这意味着在调整窗口大小时，它将创建一个侦听器来调整窗口大小。我认为这不是你想要的。太棒了，成功了！我不知道数据属性。谢谢