iOS 5固定定位和虚拟键盘 [英] iOS 5 fixed positioning and virtual keyboard

问题描述

我有一个移动网站，其中div通过position：fixed固定在屏幕底部。一切都在iOS 5中正常工作（我在iPod Touch上测试），直到我在一个带有表单的页面上。当我点击输入字段并出现虚拟键盘时，我的div的固定位置突然丢失。只要键盘可见，div就会随页面滚动。单击完成以关闭键盘后，div将恢复到屏幕底部的位置并遵循位置：固定规则。

I have a mobile website which has a div pinned to the bottom of the screen via position:fixed. All works fine in iOS 5 (I'm testing on an iPod Touch) until I'm on a page with a form. When I tap into an input field and the virtual keyboard appears, suddenly the fixed position of my div is lost. The div now scrolls with the page as long as the keyboard is visible. Once I click Done to close the keyboard, the div reverts to its position at the bottom of the screen and obeys the position:fixed rule.

是否有其他人经历过这种情况行为？这是预期的吗？谢谢。

Has anyone else experienced this sort of behavior? Is this expected? Thanks.

推荐答案

我的申请中遇到了这个问题。以下是我正在解决的问题：

I had this problem in my application. Here's how I'm working around it:

input.on('focus', function(){
    header.css({position:'absolute'});
});
input.on('blur', function(){
    header.css({position:'fixed'});
});

我只是滚动到顶部并将其定位在那里，因此iOS用户不会注意到奇怪的事情。在一些用户代理检测中包含此内容，以便其他用户不会出现此行为。

I'm just scrolling to the top and positioning it there, so the iOS user doesn't notice anything odd going on. Wrap this in some user agent detection so other users don't get this behavior.

这篇关于iOS 5固定定位和虚拟键盘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！