【问题标题】:iOS 7 input elements moving fixed positioned elementsiOS 7输入元素移动固定定位元素
【发布时间】:2013-09-29 00:50:19
【问题描述】:

我正在尝试为 iOS 7 重新编译一个应用程序,因为到目前为止旧的应用程序都没有工作。 许多问题之一是我在 UIWebViews 中使用了一些输入。文本输入、选择器等。

现在,当 iOS 7 闪亮的白色键盘出现时,网页中的所有底部固定元素(例如,确认按钮)都向上滚动,好像虚拟键盘的“顶部”是我的 UIWebView 的新底部.这是与 iOS6.x 大不相同的行为

有没有什么神奇的技巧可以让虚拟键盘的行为像以前一样工作,而不向 webView 注入 JS/CSS?

【问题讨论】:

    标签: ios input uiwebview ios7 virtual-keyboard


    【解决方案1】:

    这解决了我的 cordova 应用程序的问题。我不确定它是否适用于你,但以防万一。

    检查您的 html 元标记是否有类似的内容:

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

    用这个替换它:

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

    【讨论】:

    • 您是否尝试过使用横向应用程序?横向时的“设备高度”仍为 1024,因此屏幕底部不在视野范围内。
    • 我还没有接受答案,因为这并没有解决我的问题。实际上,这并没有什么区别。我的经历与 Pawel 在另一个答案中描述的相似,作为一种快速修复,我最终也拥有了两个不同的样式表。
    • 我在 iOS7 的本机应用程序中也面临同样的问题,但无法使用上述代码修复。我正在使用 url 在 webview 上加载,有什么帮助吗?
    • 试过这个但对我不起作用唯一帮助我的是将固定元素更改为绝对值并使用滚动值更新顶部值
    【解决方案2】:

    在我们的例子中,只要用户滚动,它就会自行修复。所以这是我们一直用来模拟在任何inputtextarea 上滚动blur 的修复:

    $(document).on('blur', 'input, textarea', function () {
        setTimeout(function () {
            window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
        }, 0);
    });
    

    【讨论】:

    • 像这样强制滚动对我有用。下面的视口修复可以工作,但也会导致 Cordova 应用出现问题,其中 width=device-width、height=device-height 会导致滚动问题。 issues.apache.org/jira/browse/CB-4323
    • 这个解决方案似乎是唯一一个不会破坏任何东西的解决方案。您还可以检查用户代理以将其仅限于移动设备。 var is_mobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i);
    【解决方案3】:

    我遇到了完全相同的问题,经过两天的实验后放弃了。看起来: a) 所有底部固定的元素都向上移动,以便它们的底部偏移相对于键盘的顶部边缘 c) 所有顶部固定的元素都保持在原来的位置(不要像以前那样向上移动) - 请注意,绝对顶部的元素可以正常工作。

    我找到的唯一解决方案是使用自定义 iPad 样式表,将所有固定元素替换为绝对元素,将 CSS 底部属性设置为自动并使用顶部代替

    【讨论】:

      【解决方案4】:

      Opposum,您的解决方案对我有用,但仅在比例设置为 1.0 时才有效。如果我将其设置为 0.9,那么它就像在您建议的修复之前一样。我将initial-scale、maximum-scale和minimum-scale设置为0.9,键盘出现时固定物体的弹跳效果还在发生。

      【讨论】:

      • 玩弄元内容,似乎最小规模是问题所在。忽略时,存在位置固定问题。当设置为小于 1.0 的值时,存在位置固定问题。当设置为大于或等于 1.0 的值时,位置固定问题得到解决。
      • 这不是一个答案,而只是一个观察;因此属于笔记。
      猜你喜欢
      • 2012-09-28
      • 2014-09-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-12-15
      • 1970-01-01
      • 2013-06-16
      • 2012-08-04
      相关资源
      最近更新 更多