4

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

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

4

1 回答 1

0

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

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

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

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

.ui-mobile, .ui-mobile .ui-page { min-height: 420px !important; }
于 2013-11-05T13:09:01.927 回答