jquery - iOS 7 Safari 干扰 jQuery Mobile 页脚

Question

我有使用 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 尝试通过在滚动页面时动态缩小顶部地址栏并隐藏底部导航栏来最大化屏幕。这会将我的页脚置于屏幕的真正底部。问题是，当我尝试点击页脚上的按钮时，它会带回浏览器导航栏，将页脚向上挤压。我必须再次点击按钮才能使其工作。

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

Answer 1

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

就我而言，我只需要在第一个屏幕上修复此问题一次，之后 safari 就会正常运行

#login {
    min-height: 420px !important;
}

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

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