iphone的safari在input框focus时, 下面会多出70px问题

Question

页面是这样的当我的键盘定位到输入框时, 加上scrollIntoView()之后, 就成这样了问题就是为什么safari下input和键盘中间多出来那一块, 这个怎么破, 注: 目测这一块是safari底栏的高度

Answer 1

在ios里面，当一个文本框的样式为fixed时候，如果这个文本框获得焦点，它的位置就会乱掉，由于ios里面做了自适应居中，这个fixed的文本框会跑到页面中间。 这也是你说的 “ 多出70px ”的原因。

解决办法有两个：
可以在文本框获得焦点的时候将fixed改为absolute，失去焦点时在改回fixed，但是这样会让屏幕有上下滑动的体验不太好。

.fixfixed {   position:absolute;
}

$(document)
    .on('focus', 'input', function(e) {
        $this.addClass('fixfixed');
    })
    .on('blur', 'input', function(e) {
        $this.removeClass('fixfixed');
    });

还有一种就是用一个假的fixed的文本框放在页面顶部，一个absolute的文本框隐藏在页面顶部，当fixed的文本框获得焦点时候将其隐藏，然后显示absolute的文本框，当失去焦点时，在把absolute的文本框隐藏，fixed的文本框显示。

.fixfixed {
position:absolute;}$(document)
    .on('focus', 'input', function(e) {        $absolute..show();
        $this.hide();
    })
    .on('blur', 'input', function(e) {         $fixed..show();
        $this.hide();
    });

题主可以试一下。;)