iOS 7 输入元素移动固定定位元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18970865/
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
iOS 7 input elements moving fixed positioned elements
提问by Francesco
I'm trying to recompile an app for iOS 7, since nothing of the old one works so far. One of the many problems is that I'm using some inputs inside UIWebViews. Text inputs, pickers etc.
我正在尝试为 iOS 7 重新编译一个应用程序，因为到目前为止旧的应用程序都不起作用。许多问题之一是我在 UIWebViews 中使用了一些输入。文本输入、选择器等
Now, when the iOS 7 shining white keyboard appears, all the bottom fixed elements in the webpage (such as, confirm buttons) are scrolled upward, as if the 'top' of the virtual keyboard is the new bottom of my UIWebView. This is a substantially different behavior from iOS6.x
现在，当 iOS 7 闪亮的白色键盘出现时，网页中所有底部固定元素（如确认按钮）都向上滚动，就好像虚拟键盘的“顶部”是我的 UIWebView 的新底部。这是与 iOS6.x 截然不同的行为
Is there any magic trick to make the virtual keyboard behavior work like it used to, without injecting JS/CSS to the webView?
有没有什么魔术可以让虚拟键盘行为像以前一样工作，而无需向 webView 注入 JS/CSS？
回答by Opossum
This fixed the problem for my cordova app. I'm not sure if it applies to you but just in case.
这解决了我的cordova 应用程序的问题。我不确定它是否适用于你，但以防万一。
Check your html meta tags for something like this:
检查您的 html 元标记是否是这样的：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
Replace it with this:
用这个替换它：
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
回答by basarat
In our case this would fix itself as soon as user scrolls. So this is the fix we've been using to simulate a scroll on bluron any inputor textarea:
在我们的例子中，这会在用户滚动时立即修复。所以这是我们一直用来模拟blur在 anyinput或上滚动的修复textarea：
$(document).on('blur', 'input, textarea', function () {
setTimeout(function () {
window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
}, 0);
});
回答by Pawel Lipka
I ran across exactly the same problem & gave up after two days of experimenting. It seems that: a) all bottom-fixed elements go upwards so that their bottom offset is relative to the top edge of the keyboard c) all top-fixed elements stay in their original position (do not move upwards as they used to) - note that top-absolute elements work ok.
我遇到了完全相同的问题并在经过两天的实验后放弃了。似乎：a）所有底部固定元素向上移动，以便它们的底部偏移量相对于键盘的顶部边缘 c）所有顶部固定元素都保持在其原始位置（不要像以前那样向上移动）-请注意，顶级绝对元素可以正常工作。
The only solution I found was to have a custom iPad stylesheet that replaces all fixed elements with absolute elements, sets the css bottom property to auto and uses top instead
我发现的唯一解决方案是使用自定义 iPad 样式表，用绝对元素替换所有固定元素，将 css 底部属性设置为 auto 并使用 top 代替
回答by David Shears
Opposum, your solution worked for me but only when the scale was set to 1.0. If I set it to 0.9 then it would be like it was before your suggested fix. I set initial-scale, maximum-scale, and minimum-scale to 0.9 and the bouncing effect of the fixed objects when the keyboard appeared was still happening.
相反，您的解决方案对我有用，但仅当比例设置为 1.0 时。如果我将它设置为 0.9，那么它就像在您建议的修复之前一样。我将initial-scale、maximum-scale和minimum-scale设置为0.9，键盘出现时固定物体的弹跳效果仍然存在。
