24

我遇到了一个不寻常的问题，我正在寻找建议。基本上，我正在使用：

  • 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() 事件中添加了一个“调试器”语句，并尝试单步执行代码。我希望被引导到其他一些旨在调整页面大小的调整大小侦听器。如果我能找到它，那么当有人选择表单元素时，我可以暂时削弱它，然后重新启用模糊或方向更改的大小调整。问题是，我单步执行了每一行代码，并且在调整大小发生之前调试过程停止了。

这让我想知道除了 window.resize 是否还有其他事件被触发。所以我在下面添加了两行：

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

然而，两人都没有被解雇。所以我有点卡住了。我有一种很好的感觉，我知道问题出在哪里，但我无法追查到根源。关于在哪里可以找到这个在 window.resize() 上调整页面大小的神秘代码的任何建议？

4

5 回答 5

10

我很高兴看到我没有疯！我很高兴地报告我已经实施了一个非常好的解决方案。以下是步骤，以防您也想这样做：

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 的单独主题：Proper way to overide a JQuery Mobile method in $.mobile

于 2012-10-16T01:47:47.883 回答
3

我有一个类似的问题试试这个：

  $('#main-browse').bind("orientationchange", function(event) {
    //Put the page dimensions for example with minimum height property

  }
于 2012-10-15T07:12:30.787 回答
2

我在使用 JQuery Mobile 1.4 的 Cordova (3.x) 中遇到了同样的问题——所以库的作者不太可能解决这个问题。我尝试了许多不同的解决方案——但没有一个能真正解决它。最接近的候选者涉及绑定简单的处理程序，这些处理程序分别绑定到窗口和文档对象上的“throttleresize”和“pageshow”事件。

然而，我仍然失去了 UI 的“锁定”感觉，并且用户可以在键盘退出后将我的整个 UI 向上拖动。确实页眉和页脚没有移动，但是我的背景和主要内容区域现在可以拖动了，并且出现了滚动条。如果您正在尝试那种本机应用程序的感觉，那是完全不可接受的......

所以我决定查看 Chrome/Safari firebug 并找出额外像素被添加到盒子模型的位置。奇怪的是，我注意到它根本没有改变高度，在我的情况下，它是活动页面上的填充。所以我从另一个 Stack 帖子中改编了一个解决方案：

function resetActivePageHeight() {
var aPage = $( "." + $.mobile.activePageClass ),
  aPagePadT = parseFloat( aPage.css( "padding-top" ) ),
  aPagePadB = parseFloat( aPage.css( "padding-bottom" ) ),
  aPageBorderT = parseFloat( aPage.css( "border-top-width" ) ),
  aPageBorderB = parseFloat( aPage.css( "border-bottom-width" ) );
aPage.css( "min-height", deviceInfo.height - aPagePadT - aPagePadB - aPageBorderT - aPageBorderB )
.css("top","0px").css("padding","0px");}

然后我将它们绑定到设备准备好的文档和窗口事件。

  $( document ).bind( "pageshow", resetActivePageHeight );
  $( window ).bind( "throttledresize", resetActivePageHeight );

再说一次，虽然我想称赞，但我想我只是找到了另一个角度来理解别人的好主意。

于 2014-02-21T20:11:01.180 回答
1

转到您的 androidmanifest 文件并在活动中，更改或更新此值 android:windowSoftInputMode="adjustResize"

我知道adjustPan 会破坏页面，因此控件被隐藏。默认（未指定）可能没问题，这里还有其他选项。我认为如果不调整大小，它不会与 jqm 沟通显示 kb

所以让 jqm 保持原样，没有你的改变，顺便说一句，它会完成它的工作，我使用的是 cordova 2.2、jqm 1.2 和 jquery 1.8.2

于 2013-02-01T14:56:22.533 回答
0

我遇到了一个问题，虚拟键盘会扩展视口，在下面显示内容（外部面板）。

我通过根据窗口高度设置css高度来解决：

$('#page').css('height', $(window).height());
于 2014-01-11T00:27:00.903 回答