Question

我遇到了jQuery Mobile网站的问题。有一个工具栏使用

固定在屏幕底部

<footer data-role="footer" data-position="fixed" data-tap-toggle="false">

然而，在iPhone上，当键盘出现时它似乎跳了起来 - 它比键盘跳得更高，所以工具栏底部和键盘顶部之间有空隙。

要查看效果，请转到iPhone / Mobile Safari上的以下网址：

http://goo.gl/F4blB

点击“加入讲座”按钮，然后在下一个屏幕上，开始在文本框中输入内容。您应该看到工具栏在键盘上方跳跃。请注意，它在桌面上工作正常，因此请确保您在iPhone上查看问题。

这似乎与页面上内容的长度有关。如果只有一两行内容，那就没关系。只有当页面长度增加时才会出现问题。

即使将窗口调整为与iPhone窗口一样小，Chrome也没有问题。

我们正在使用jQM 1.3.0和jQuery 1.9.1。最新版本的iOS。

知道工具栏如何真正修复？

Answer 1

这是jQuery Mobile中的一个错误。

您需要自己修复jQuery Mobile代码。首先搜索此代码行：

if( screen.width < 500 && $( e.target ).is( o.hideDuringFocus ) && !$( e.target ).closest( ".ui-header-fixed, .ui-footer-fixed" ).length ){

并更改screen.width＆lt; XXX可容纳更大的屏幕设备。

有关此问题的更多信息，请参阅此官方机票：https://github.com/jquery/jquery-mobile/issues/4113

Answer 2

使用此：

https://github.com/jquery/jquery-mobile/issues/5532

$（'input，textarea'） .on（'focus'，function（e）{ $（'header，footer'）。css（'position'，'absolute'）; }） .on（'blur'，function（e）{ $（'header，footer'）。css（'position'，'fixed'）; //强制页面重绘以修复错误定位的固定元素 setTimeout（function（）{ window.scrollTo（$ .mobile.window.scrollLeft（），$ .mobile.window.scrollTop（））; }，0）; }）;

为什么在Mobile Safari中没有修复jQuery Mobile固定工具栏？

2 个答案: