ios – 当在Safari中打开虚拟键盘时,如何阻止我的固定导航移动?

我理解,移动safari在固定元素有很多bug,但在大多数情况下,我已经设法让我的布局工作正常,直到我添加了一个非常需要的文本输入到底部的固定导航。现在当用户专注于文本输入元素并且虚拟键盘出现时,我的导航,否则总是固定在页面的底部,跳跃到页面中间的一个奇怪的地方。

我会添加一些我的代码到这篇文章,但我不知道从哪里开始。该导航固定在底部,并位于左侧和底部0和100%宽度。从那里,我不知道发生了什么,我只能假设它是一个移动safari bug。

它也似乎失去它的位置固定和变成相对,只有当文本输入元素聚焦和虚拟键盘打开。

最佳答案
http://dansajin.com/2012/12/07/fix-position-fixed/这是提出的解决方案之一。似乎值得一枪。

简而言之:将固定元素设置为位置:当任何输入聚焦时为绝对,并在元素模糊时将其重置

.header { 
    position: fixed; 
} 
.footer { 
    position: fixed; 
} 
.fixfixed .header, 
.fixfixed .footer { 
    position: absolute; 
} 

if ('ontouchstart' in window) {
    /* cache dom references */ 
    var $body = $('body'); 

    /* bind events */
    $(document)
    .on('focus', 'input', function() {
        $body.addClass('fixfixed');
    })
    .on('blur', 'input', function() {
        $body.removeClass('fixfixed');
    });
}

转载注明原文:ios – 当在Safari中打开虚拟键盘时,如何阻止我的固定导航移动? - 代码日志