2

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

$(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);
4

1 回答 1

2

首先，您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);
于 2015-01-08T16:01:30.037 回答