在iOS 7全屏网页应用程序中打破了webkit-overflow-scrolling表单 [英] webkit-overflow-scrolling forms broken on iOS 7 full-screen web app

问题描述

我在iOS7上的全屏（保存到主屏幕）iPhone网络应用程序时遇到问题。

I'm having trouble with a full-screen (saved to home screen) iPhone web app on iOS7.

通常，当选择输入时，它有滚动到键盘上方的视图。

Typically, when an input is selected, it has scrolled into view above the keyboard.

然而，iOS7上似乎没有在全屏网页应用程序中滚动DIV。

However, this doesn't seem to happen on iOS7 for scrolling DIVs in a full-screen web app.

因此，当DIV使用-webkit-overflow-scrolling：touch并点击屏幕下半部分的输入时，键盘会被触发，但输入不会滚动并且，

Thus, when a DIV uses "-webkit-overflow-scrolling: touch" and an input in the bottom half of the screen is clicked, the keyboard is fired, but the input doesn't scroll up.

并且，此时，输入将不会响应任何进一步的onFocus事件，否则我可以将其向上滚动。

AND, at that time, the input won't respond to any further onFocus events that I could otherwise scroll it up with.

有人看过解决方法吗？

推荐答案

更新视口元标记为我修复了它。

Updating the viewport meta tag fixed it for me.

我改变了这个：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

对此：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

height = device-height 是实际的修复（没有它，视口会调整大小以适应键盘）。

height=device-height is the actual fix (without it the viewport gets resized to accommodate the keyboard).

这篇关于在iOS 7全屏网页应用程序中打破了webkit-overflow-scrolling表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！