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，使标签栏被推到底部。

在我的情况下，我只需要在第一个屏幕上解决这个问题，然后在该游戏之后表现正常

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

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

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

iOS7 Safari会干扰jQueryMobile页脚

1 个答案: