window.resize 由于虚拟键盘导致 jquery mobile 出现问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12879857/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
window.resize due to virtual keyboard causes issues with jquery mobile
提问by Anthony
I'm hitting an unusual problem and I'm looking for suggestions. Basically, I'm using:
我遇到了一个不寻常的问题，我正在寻找建议。基本上，我正在使用：
- JQuery Mobile 1.1
- JQuery 8.2
- PhoneGap (Cordova) 2.1
- jQuery 移动版 1.1
- jQuery 8.2
- PhoneGap (Cordova) 2.1
On many pages in my app on iPhone, if I put my cursor into an input box, this opens the virtual keyboard. That's fine and expected.
在 iPhone 上我的应用程序的许多页面上，如果我将光标放入输入框中，则会打开虚拟键盘。这很好，在意料之中。
Here's the problem: In some cases (but not all), placing my cursor into an input box fires the window.resize event. I've verified this via the code below:
问题是：在某些情况下（但不是全部），将光标放入输入框中会触发 window.resize 事件。我已经通过以下代码验证了这一点：
$(window).resize(function(e) {
alert('The window resize occurred! Width: ' + $(window).width() + " Height: " + $(window).height());
debugger;
return false;
});
Immediately after it resolves the window.resize event, JQueryMobile decides to resize the page to an incorrect height. I can tell it is the page because I added a different color border to each element to see what was what. And in many cases, this resize action is causing half of my GUI to overflow underneath the bottom of the div, sometimes even making my cursor appear hidden under the div.
在解决 window.resize 事件后，JQueryMobile 立即决定将页面大小调整为不正确的高度。我可以说它是页面，因为我为每个元素添加了不同的颜色边框以查看是什么。在许多情况下，这种调整大小操作会导致我的一半 GUI 溢出到 div 底部下方，有时甚至使我的光标隐藏在 div 下。
The best way to understand it is with a screenshot:
理解它的最好方法是使用屏幕截图：
Now, I don't really expect anyone to have an exact answer for this. I'm just looking for debugging tips. I added a "debugger" statement into my window.resize() event and tried to step through the code. I was hoping to be lead to some other resize listener that is designed to resize the page . If I can find that, then I can temporarily cripple it when someone selects a form element, then re-enable resizing on blur or orientation change. The problem is, I stepped through every line of code and the debug process stops right before the resize occurs.
现在，我真的不希望有人对此有确切的答案。我只是在寻找调试技巧。我在 window.resize() 事件中添加了一个“调试器”语句，并尝试单步执行代码。我希望被引导到其他一些旨在调整页面大小的调整大小侦听器。如果我能找到，那么当有人选择一个表单元素时，我可以暂时削弱它，然后在模糊或方向改变时重新启用调整大小。问题是，我逐步执行了每一行代码，并且调试过程在调整大小发生之前就停止了。
This makes me wonder if there is some other event being fired aside from window.resize. So I added the two lines below:
这让我想知道除了 window.resize 之外是否还有其他一些事件被触发。所以我添加了以下两行：
document.addEventListener("throttledresize", function() { alert("throttledresize fired.") }, false);
document.addEventListener("orientationchange", function() { alert("orientationchange fired.") }, false);
Neither fired, however. So I'm somewhat stuck. I have a good feeling I know what the problem is, but I can't trace it to the source. Any suggestions on where I can find this mysterious code that resizes the page on window.resize()?
然而，两人都没有开枪。所以我有点卡住了。我有一种很好的感觉，我知道问题出在哪里，但我无法追溯到源头。关于我在哪里可以找到这个在 window.resize() 上调整页面大小的神秘代码的任何建议？
采纳答案by Anthony
I'm glad to see I'm not crazy! I'm happy to report I've implemented a pretty good solution. Here are the steps, in case you'd like to do the same:
我很高兴看到我没有疯！我很高兴地报告我已经实施了一个非常好的解决方案。以下是步骤，以防万一您也想这样做：
1) Go into jquery.mobile-1.x.x.js
1) 进入 jquery.mobile-1.xxjs
2) Find $.mobile = $.extend() and add the following attributes:
2) 找到 $.mobile = $.extend() 并添加以下属性：
last_width: null,
last_height: null,
3) Modify getScreenHeight to work as follows:
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;
}
Basically this will prevent jQuery from recalculating the page height unless the width also changes. (i.e. an orientation change) Since the soft keyboard only affects the height, this method will returned the cached value instead of a modified height.
基本上这将阻止 jQuery 重新计算页面高度，除非宽度也发生变化。（即方向改变）由于软键盘仅影响高度，因此此方法将返回缓存值而不是修改后的高度。
I'm going to create a separate post to ask how to properly override the $.mobile.getScreenHeight method. I tried adding the code below into a separate JS file, but it didn't work:
我将创建一个单独的帖子来询问如何正确覆盖 $.mobile.getScreenHeight 方法。我尝试将下面的代码添加到单独的 JS 文件中，但没有奏效：
delete $.mobile.getScreenHeight;
$.mobile.last_width = null;
$.mobile.last_height = null;
$.mobile.getScreenHeight = function()
{
... the code listed above
}
It fired most of the time, but also fired the original function. Kinda weird. I've posted a separate topic in regard to how to properly extend $.mobile here: Proper way to overide a JQuery Mobile method in $.mobile
大部分时间它都会触发，但也会触发原始函数。有点怪。我在这里发布了一个关于如何正确扩展 $.mobile 的单独主题：在 $.mobile中覆盖 JQuery Mobile 方法的正确方法
回答by mram888
I had a similar issue try this:
我有一个类似的问题试试这个：
$('#main-browse').bind("orientationchange", function(event) {
//Put the page dimensions for example with minimum height property
}
回答by Robert Sherman
I was having the same issue in Cordova (3.x) using JQuery Mobile 1.4--so this isn't something likely to be addressed by the authors of the library. I tried many different solutions--but none really fixed it. The closest candidate involved binding simple handlers bound to the "throttleresize" and "pageshow" events on the window and document objects, respectively.
我在使用 JQuery Mobile 1.4 的 Cordova (3.x) 中遇到了同样的问题——所以这个库的作者不太可能解决这个问题。我尝试了许多不同的解决方案——但没有一个真正解决它。最接近的候选对象涉及绑定简单的处理程序，它们分别绑定到窗口和文档对象上的“throttleresize”和“pageshow”事件。
Yet, I still lost the "locked down" feel of the UI and the user could drag my entire UI up after the keyboard exited. Sure the header and footer did not move, but my background and the main content area were now draggable, and scroll bars appeared. Totally unacceptable if you are trying for that native app feel...
然而，我仍然失去了用户界面的“锁定”感觉，用户可以在键盘退出后向上拖动我的整个用户界面。当然页眉和页脚没有移动，但我的背景和主要内容区域现在可以拖动，并且出现了滚动条。如果您正在尝试使用本机应用程序感觉完全不可接受...
So I decided to look in Chrome/Safari firebug and find out where the extra pixels are being added to the box model. Oddly, I noticed it isn't the height being changed at all, in my case it was the padding on the active page. so I adapted a solution from another Stack posting:
所以我决定查看 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");}
Then I bound them to the document and window events on device ready.
然后我将它们绑定到设备准备好的文档和窗口事件。
$( document ).bind( "pageshow", resetActivePageHeight );
$( window ).bind( "throttledresize", resetActivePageHeight );
Again, although i would like to take credit, I think I just found an additional angle to someone else's good idea.
同样，虽然我想获得荣誉，但我想我只是找到了另一个角度来理解别人的好主意。
回答by Radoslaw Dziegielewski
go to your androidmanifest file and in the activity, change or update to this value android:windowSoftInputMode="adjustResize"
转到您的 androidmanifest 文件并在活动中，更改或更新此值 android:windowSoftInputMode="adjustResize"
i know for a fact that adjustPan breaks the page so the controls are hidden. the default (unspecified) may be ok and there are other options here. i think if it is not to resize, it does not communicate to jqm that kb is shown
我知道 adjustPan 会破坏页面以便隐藏控件。默认（未指定）可能没问题，这里还有其他选项。我认为如果不调整大小，它不会与 jqm 通信显示 kb
so leave jqm as is, without your changes and it will do its job btw, i am using cordova 2.2, jqm 1.2 and jquery 1.8.2
所以保持jqm不变，没有你的改变，它会完成它的工作顺便说一句，我使用cordova 2.2，jqm 1.2和jquery 1.8.2
回答by Joe's Ideas
I had a problem where the virtual keyboard would extend the viewport, showing the contents underneath(an external panel).
我有一个问题，虚拟键盘会扩展视口，显示下面的内容（外部面板）。
I solved by setting the css height based on the window height:
我通过根据窗口高度设置css高度来解决：
$('#page').css('height', $(window).height());
