2

新的 iOS7 状态栏与我的应用程序的标题重叠，导航按钮被部分覆盖。但是，它在 iOS6 中看起来很漂亮，我拒绝为 iOS7 添加边距/填充并破坏以前版本的外观。

是否有任何干净的解决方案（类似于独占选择器）可以使其在两个系统中都工作？

我尝试了什么？

正如我所说，我设法在 iOS7 上解决了这个问题，为标题添加了一些额外的边距（虽然由 jQueryMobile 格式化），但这种变化也会影响 iOS6 中的视图。我确定我还缺少其他一些技巧，但谷歌还没有给我答案。

提前致谢。

4

3 回答 3

5

有一个简单的解决方案。它不会破坏 iOS6 上应用程序的外观，因为它仅适用于 ios7>

#1 主视图控制器.m

您可以在MainViewController.m中使用它，查找 - (void)viewWillAppear:(BOOL)animated并添加 if 函数：

- (void)viewWillAppear:(BOOL)animated
{
    // View defaults to full size.  If you want to customize the view's size, or its subviews (e.g. webView),
    // you can do so here.
    //Lower screen 20px on ios 7
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 20;
        viewBounds.size.height = viewBounds.size.height - 20;
        self.webView.frame = viewBounds;
    }
    [super viewWillAppear:animated];
}

从这里开始：iOS 7 状态栏重叠 UI

或者

#2 自定义 JS

function onDeviceReady() {
    if (parseFloat(window.device.version) === 7.0) {
          document.body.style.marginTop = "20px";
    }
}

为此，您需要设备插件。但第二个对我不起作用。另一方面，#1 就像一个魅力。

于 2013-11-12T19:07:30.433 回答
1

这是我最终采用的解决方案。我有一个多页 JQuery Mobile 设置，所以我不能只div在 -tag 的开头插入 a body（因为这只会显示在第一页上）。另外，我希望标题的颜色显示在 iOS7 状态栏的后面。我的应用程序的页面有不同的配色方案，所以我不能只div添加一个具有固定背景颜色的额外内容。相反，header当我检测到 iOS7 时，我会增加带有角色的元素的填充：

Javascript：

//take iOS7 transparent menubar into account
if (parseFloat(window.device.version) === 7.0) {
    $('[data-role="header"]').addClass("ios7");
    $('.ui-btn-left').addClass("ios7-header-button");
}

CSS：

.ios7
{
    padding-top: 20px !important;
}

.ios7-header-button
{
    margin-top: 20px !important;
}

的填充.ui-btn-left是降低标题中该类的任何按钮；jQuery Mobile 的格式化魔法似乎忽略了标题本身的填充，只是将按钮放在 iOS7 状态栏的中间位置。

于 2014-03-16T11:30:39.640 回答
0

我在 HTML 的标题中添加了填充。

<div data-role="header" data-position="fixed" data-theme="b" style="padding-top:20px;">
    <h1 id="page_title">Title</h1>
</div>

在 JavaScript 中，我为按钮添加了边距。

$(".ui-btn-left").css("margin-top", "20px");
于 2015-02-09T11:42:02.533 回答