jquery - 为什么 jQuery Mobile 固定工具栏在 Mobile Safari 中不固定？

Question

我在使用 jQuery Mobile 网站时遇到问题。有一个工具栏固定在屏幕底部，使用

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

但是，在 iPhone 上，当键盘出现时它似乎会跳起来 - 而且它跳起来比键盘高，所以工具栏底部和键盘顶部之间有空间。

要查看效果，请在 iPhone/Mobile Safari 上访问以下 URL:

http://goo.gl/F4blB

单击“加入讲座”按钮，然后在下一个屏幕上开始在文本框中输入内容。您应该会看到工具栏跳到键盘上方。请注意，它在桌面上运行良好，因此请确保您使用的是 iPhone 以查看问题。

这好像和页面内容的长度有关。如果只有一两行内容，没关系。只有当页面的长度增长时，问题才会出现。

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

我们使用的是 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 < XXX 以适应更大的屏幕设备。

有关此问题的更多信息可在此处的官方票证中找到:https://github.com/jquery/jquery-mobile/issues/4113