iOS7 Safari干扰jQueryMobile页脚

我有这个代码使用jQuery Mobile 1.3.2。它看起来像一个电子邮件应用程序，具有固定的页眉/页脚栏和滚动内容。在iOS 6 Safari上运行得非常好。iOS7 Safari干扰jQueryMobile页脚

<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浏览器试图通过最大限度地提高屏幕动态收缩顶部的地址栏和底部隐藏导航栏为您滚动页面。这使我的页脚处于屏幕的真正底部。问题是当我尝试点击页脚上的按钮时，它会返回浏览器导航栏，挤压页脚。我必须再次点击按钮才能使其工作。

任何想法如何解决这个问题？谢谢。

来源

2013-09-28 Whoever

你有没有找到解决这个问题的办法，我面临同样的问题。 –

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

我无法相信苹果做出了这样的改变......他们已经接管了这样一个至关重要的房地产业务，这很荒谬。 –

我发现这个问题的解决方案，通过重要通知将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-05 13:09:01

我认为这会更改较小页面的默认屏幕高度，因此无需底部浏览器导航栏即可显示全屏，对不对？我也是在我的一些页面上做的。我原来的问题是，如果你有自己的带有按钮的固定页脚工具栏，你不能先点击浏览器导航栏，然后点击它们，这是一个不可用的两步过程。 – Whoever

回答

相关问题