仅在调整 window 宽度时调用 jquery 函数

Question

我有一个函数 responsive 可以改变我网站上某些元素的行为，包括隐藏弹出窗口等。我在 2 种情况下调用它：

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

问题出现在 android chrome，因为虚拟键盘实际上改变了屏幕的高度，并触发了 responsive 功能，关闭了我的弹出窗口（其中一些有文本字段，无法输入）。

如何防止这种情况发生？我在某处读到一个很好的观点，即 android 虚拟键盘只改变屏幕的高度，而不是宽度，所以我认为比较调整大小前后的宽度是个好主意。所以我创建了这个函数来比较前后的宽度，如果宽度不同则运行 resize()，但它没有按预期工作，控制台日志显示不同的文档宽度，即使我只改变了屏幕的高度（使用 chrome 开发者工具）。

知道哪里出了问题或者我怎样才能防止功能 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);

Answer 1

首先，您多次将处理程序附加到 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 宽度时调用 jquery 函数

Call jquery function only when window width gets resized

javascript

jquery

android

google-chrome

android-virtual-keyboard