javascript 当android软键盘处于活动状态时防止网页的视口调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17195278/
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
Preventing viewport resize of web page when android soft keyboard is active
提问by Obinwanne Hill
I'm developing a Javascript/JQuery plugin for Responsive Web Design. It has a function that monitors the viewport for changes, specifically resize and orientation. When a change is detected, a corresponding callback function is called.
我正在为响应式网页设计开发 Javascript/JQuery 插件。它具有监视视口变化的功能，特别是调整大小和方向。当检测到变化时，会调用相应的回调函数。
However, I just noticed that on Android (specifically using the stock browser on a Google Galaxy Nexus), if the user tries to use the soft keyboard, it resizes the viewport, thus firing the callback function. This is behaviour I would like to eliminate.
但是，我刚刚注意到在 Android 上（特别是在 Google Galaxy Nexus 上使用股票浏览器），如果用户尝试使用软键盘，它会调整视口的大小，从而触发回调函数。这是我想消除的行为。
Is there a way to - via Javascript - disable this behaviour or detect for it so I can make changes to the code base to accommodate it?!
有没有办法 - 通过 Javascript - 禁用此行为或检测它，以便我可以更改代码库以适应它？！
The solutions I've seen so far have to do mainly with Android App Development and I'm not sure they apply in my case.
到目前为止，我看到的解决方案主要与 Android 应用程序开发有关，我不确定它们是否适用于我的情况。
Thanks.
谢谢。
采纳答案by Obinwanne Hill
Ok, well after some fiddling around I've found out a solution to my problem.
好吧，经过一番摆弄之后，我找到了解决问题的方法。
So what happens when the soft keyboard is shown/hidden?! In my test, the viewport widthremains constant. However, the viewport heightchanges size [((current - previous)/previous)*100] when the soft keyboard is shown by 43%(in portrait) and by 58%(in landscape); and when the soft keyboard is hidden by 73%(in portrait) and 139%(in landscape) respectively.
那么当软键盘显示/隐藏时会发生什么？！在我的测试中，viewport width保持不变。但是，当软键盘显示为（纵向）和由（横向）时，viewport height大小会发生变化；当软键盘分别被（纵向）和（横向）隐藏时。((current - previous)/previous)*10043%58%73%139%
So what I did was disable the callback function when the following conditions are all true:
所以我所做的是在以下条件都为真时禁用回调函数：
- The device is mobile
- The percentage change in viewport width is less than 1%
- The percentage change in viewport height is greater than 35%
- 该设备是移动的
- 视口宽度的百分比变化小于 1%
- 视口高度的百分比变化大于 35%
Since mobile device browsers do not have resize handles like on the desktop, I do not believe there will arise a situation where a user will mimic the above conditions in a natural way.
由于移动设备浏览器没有像桌面那样调整大小的句柄，我认为不会出现用户以自然方式模仿上述条件的情况。
You can see a sample of the code here: https://github.com/obihill/restive.js/blob/f051fe6611e0d977e1c24c721e5ad5cb61b72c1c/src/restive.js#L4419. Unfortunately, it's part of a bigger codeset, but you should be able to glean the basic idea based on the conditionals.
您可以在此处查看代码示例：https: //github.com/obihill/restive.js/blob/f051fe6611e0d977e1c24c721e5ad5cb61b72c1c/src/restive.js#L4419。不幸的是，它是更大代码集的一部分，但您应该能够根据条件收集基本思想。
Cheers.
干杯。
回答by Andreas Norman
I had a similar problem. And my solution was to use the orientation change event instead of the resize event which triggers when you least expect it on android :P
我有一个类似的问题。我的解决方案是使用方向更改事件而不是 resize 事件，该事件在您最不希望在 android 上触发时触发：P
$(window).bind( 'orientationchange', function(e){ // Type pretty code here });
source: http://www.andreasnorman.com/dealing-androids-constant-browser-resizing/
来源：http: //www.andreasnorman.com/dealing-androids-constant-browser-resizing/
回答by Daniel Karski
I can share you with my pretty code. I was setting trigger on resizeevent and counting height relative to before resize event.
我可以和你分享我的pretty code。我在resize事件上设置触发器并计算相对于调整大小事件之前的高度。
originalHeight * 100 / currentHeightgive you precent wich you can change height container
originalHeight * 100 / currentHeight给你precent，你可以改变高度容器
You can see a sample of the code here https://jsfiddle.net/ocg9Lus7/
您可以在此处查看代码示例 https://jsfiddle.net/ocg9Lus7/
UPDATE 19.11.2018
2018 年 11 月 19 日更新
I recomend you change value from dynamic (100%, vh etc.) to static value after onload window. If you need more dynamic container you can reculclate sizes by bynding function to resizeevent (originalHeight * 100 / currentHeight)
我建议您在加载窗口后将值从动态（100%、vh 等）更改为静态值。如果您需要更多动态容器，您可以通过将函数绑定到resize事件 ( originalHeight * 100 / currentHeight)来重新计算大小
You can see a sample of the code here: https://jsfiddle.net/gbmo6uLp/
您可以在此处查看代码示例：https: //jsfiddle.net/gbmo6uLp/
