iOS 7 Safari 干扰 jQuery Mobile 页脚

Posted 2023-03-21

【中文标题】iOS 7 Safari 干扰 jQuery Mobile 页脚

【英文标题】：iOS7 Safari interfere with jQueryMobile footer

【发布时间】：2013-10-04 12:38:23

【问题描述】：

我有这段代码使用 jQuery Mobile 1.3.2。它看起来像一个电子邮件应用程序，具有固定的页眉/页脚栏和介于两者之间的滚动内容。在 ios 6 Safari 上运行良好。

<div data-role="header" data-position="fixed">
    <h1>Message</h1>
    <a ajax-href='@Url.Action("UpdateMsgStatus")/@msgid' data-method="post">
        <i class="icon-arrow-left icon-2x"></i>
    </a>
</div>

<div data-role="content">
    @html.Partial("_MsgDetailsList.mobile", new List<Message>(Model))
</div>

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
    <a data-href="@Url.Action("Reply", "Message")">
        <i class="icon-reply icon-2x"></i>
    </a>

    <a data-href="@Url.Action("Forward", "Message")" >
        <i class="icon-envelope icon-2x"></i>
    </a>
</div>

现在我升级到 iOS 7，新的 Safari 尝试通过动态缩小顶部地址栏并在滚动页面时隐藏底部导航栏来最大化屏幕。这使我的页脚位于屏幕的真正底部。问题是当我尝试点击页脚上的按钮时，它会带回浏览器导航栏，向上挤压页脚。我必须再次点击该按钮才能使其工作。

知道如何解决这个问题吗？谢谢。

【问题讨论】：

你找到解决这个问题的方法了吗，我也遇到了同样的问题。

似乎无法控制浏览器的行为。我将所有按钮都移到了屏幕顶部。

我不敢相信苹果做出了这样的改变......他们接管了如此重要的一块房地产真是荒谬。

我们也遇到了同样的问题。尝试将填充放在最底部按钮下方，但当然，这只是一个临时修复，只是欺骗用户向下滚动一点。

【参考方案1】：

我通过将 ui-page 元素的 min-height 属性设置为 420px 并带有重要通知找到了解决此问题的方法。在调试时，我注意到 iOS7 将最小高度设置为 1321px，使标签栏被推到底部。

就我而言，我只需要在第一个屏幕上修复一次，然后 safari 就可以正常运行

#login 
    min-height: 420px !important;

如果需要，您还可以将其全局设置为所有屏幕

.ui-mobile, .ui-mobile .ui-page  min-height: 420px !important; 

【讨论】：

我认为这会更改较小页面的默认屏幕高度，因此会出现全屏而没有底部浏览器导航栏，对吧？我也在我的一些页面上这样做。我最初的问题是，如果您有自己的带有按钮的固定页脚工具栏，则必须先调出浏览器导航栏才能点击它们，这使其成为无法使用的两步过程。