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();     });题主可以试一下。;)