由于虚拟键盘导致的window.resize导致jquery mobile出现问题

Question

我遇到了一个不寻常的问题,我正在寻找建议.基本上,我正在使用:

• JQuery Mobile 1.1
• JQuery 8.2
• PhoneGap(科尔多瓦)2.1

在iPhone上我的应用程序的许多页面上,如果我将光标放入输入框,则会打开虚拟键盘.这很好,期待.

这是问题所在:在某些情况下(但不是全部),将光标放入输入框会触发window.resize事件.我通过以下代码验证了这一点:

    $(window).resize(function(e) {
        alert('The window resize occurred!  Width: ' + $(window).width() + " Height: " + $(window).height());
        debugger;
        return false;
    });

在解析window.resize事件后,JQueryMobile立即决定将页面调整为不正确的高度.我可以告诉它是页面,因为我为每个元素添加了不同的颜色边框以查看它是什么.在许多情况下,这个调整大小的动作导致我的一半GUI在div的底部溢出,有时甚至使我的光标隐藏在div下面.

理解它的最好方法是使用屏幕截图:

现在,我真的不希望任何人对此有一个确切的答案.我只是在寻找调试技巧.我在window.resize()事件中添加了一个"调试器"语句,并尝试逐步执行代码.我希望能够引导一些旨在调整页面大小的其他调整大小的侦听器.如果我能找到它,那么当有人选择表单元素时,我可以暂时削弱它,然后重新启用模糊或方向更改的大小调整.问题是,我逐步完成了每行代码,调试过程在调整大小之前就停止了.

这让我想知道是否还有一些其他事件被从window.resize中解雇.所以我在下面添加了两行:

    document.addEventListener("throttledresize", function() { alert("throttledresize fired.") }, false);
    document.addEventListener("orientationchange", function() { alert("orientationchange fired.") }, false);

然而,两者都没有被解雇.所以我有点卡住了.我很清楚我知道问题是什么,但我无法追溯到源头.关于在哪里可以找到这个在window.resize()上调整页面大小的神秘代码的任何建议？

Answer 1

我很高兴看到我不疯了!我很高兴地报告我已经实施了一个非常好的解决方案.以下是步骤,如果您想要这样做:

1)进入jquery.mobile-1.xxjs

2)找到$ .mobile = $ .extend()并添加以下属性:

last_width: null,
last_height: null,

3)修改getScreenHeight以使其工作如下:

getScreenHeight: function() {
    // Native innerHeight returns more accurate value for this across platforms,
    // jQuery version is here as a normalized fallback for platforms like Symbian

    if (this.last_width == null || this.last_height == null || this.last_width != $( window ).width())
    {
        this.last_height = window.innerHeight || $( window ).height();
        this.last_width = $(window).width();
    }
    return this.last_height;
}

基本上这将阻止jQuery重新计算页面高度,除非宽度也发生变化.(即方向更改)由于软键盘仅影响高度,因此此方法将返回缓存的值而不是修改的高度.

我将创建一个单独的帖子来询问如何正确覆盖$ .mobile.getScreenHeight方法.我尝试将下面的代码添加到一个单独的JS文件中,但它不起作用:

delete $.mobile.getScreenHeight;
$.mobile.last_width = null;
$.mobile.last_height = null;
$.mobile.getScreenHeight = function() 
{
   ... the code listed above
}

它大部分时间都被解雇了,但也解雇了原来的功能.有点奇怪.我已经发布了一个关于如何在这里正确扩展$ .mobile的单独主题:在$ .mobile 中覆盖JQuery Mobile方法的正确方法