5

我有 jQuery Mobile 应用程序http://gudulin.ru/test/problem.html。

页面加载后左侧面板打开： $('#my-panel').panel("open");

我在我的页面和@media css 内容中添加了一个类ui-responsive-panel，因此我可以一起使用面板和页面内容。

笔记本电脑浏览器上一切正常，但 iPad 浏览器（Safari 或其他）出现问题。当左面板打开并且我开始在文本区域中输入文本时，在输入任何符号后会跳转一个页面。当您开始在 textarea 底部输入时（当文本从键盘输入时），问题就出现了。

如果您没有明白我的意思，请观看视频：http ://www.youtube.com/watch?v=Q6_kM_FshrQ 。

如何重现：

  1. 用 iPad打开http://gudulin.ru/test/problem.html
  2. 检查左侧面板是否打开
  3. 将任何内容写入文本区域，然后按几次 Enter 按钮。

谢谢。

4

2 回答 2

3

我在 jQuery Mobile 论坛http://forum.jquery.com/topic/jquery-mobile-responsive-panel-and-textarea上粘贴了相同的问题，并从ishmaelaz得到了答案，所以我把它留在这里关闭这个问题。

几个月来，我一直在用类似的响应式面板布局来解决同样的问题，尽管使用的是文本字段。我上周找到了原因，但还没有时间组装一个问题的演示。

要解决此问题，请编辑 jquery.mobile 并查找_bindFixListener：（它是 1.3.0 中的第 8149 行）。在此例程中，注释掉throttledresize处理程序。一旦你这样做了，跳跃就会停止。

据我所知，这里的问题是 iOS 在您键入输入文本字段时发送调整大小事件。这导致此处理程序触发，它调用 _positionPanel。_positionPanel 试图确保面板是可见的，大概是因为此逻辑针对的是非响应式场景，在这种情况下，面板确实应该始终可见以便有用，但在响应式场景中，它只会导致不断的跳跃。

可见的键盘似乎是计算出错的关键部分，因为我发现如果你在页面底部添加一个高 div 以使其更长，那么这个逻辑不会触发，似乎是因为页面底部不在键盘“下方”。不过，我还没有对此进行过测试，因为一旦我找到了一种使跳跃停止的方法，我就很高兴。

于 2013-04-25T11:34:05.660 回答
1

由于虚拟键盘使用此window.resize 会导致 jquery mobile 出现问题

it will be great solution.
1) Go into jquery.mobile-1.x.x.js

2) Find $.mobile = $.extend() and add the following attributes:

last_width: null,
last_height: null,
3) Modify getScreenHeight to work as follows:

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;
}
于 2013-07-26T05:33:57.267 回答