使用jQuery Mobile构建的iOS应用程序的页脚位置不正确

Question

我正在使用PhoneGap和jQuery Mobile开发一个应用程序。

我的页脚位置有问题。在iPhone上，它太低了，看起来没有考虑iPhone状态栏，查询"认为"整个html有更多的空间。

简而言之，页脚太低了20px（状态栏的高度是20px）。

<div data-role="footer" data-position="fixed">
    <div data-role="navbar" class="main-tab-bar">
        <ul><li ...><li ...><li ...><li ...></ul>
    </div>
</div>

在我的电脑上，它看起来不错，但当我把它放在手机上（作为iphone应用程序）时，它放错了地方。

谢谢你给我的任何提示，可以为我指明正确的方向。

Answer 1

您可以设置一个CSS规则来针对页面元素，并在底部添加一些边距，这样用户就可以滚动查看所有内容：

.ui-page {
    margin-bottom : 20px;
}

也可以使用ui-content类来定位data-role="content元素。

是的，这很令人沮丧。令人惊讶的是，苹果没有考虑Safari Mobile的用户界面，这意味着网络开发人员必须弥补这一不足。