Question

如何避免离子头像这样落后ios状态栏？

我使用以下代码创建了标题：

<ion-view title="{{title}}" hide-nav-bar="false">

Answer 1

来自：http://www.sitepoint.com/5-ionic-app-development-tips-tricks/

Ionic有特定的类来处理这个问题 - platform-ios和platform-cordova。 Ionic的预构建元素以这些类为目标，并在标题中的按钮中添加20px的上边距，以弥补这些情况。为了让我自己的自定义元素做同样的事情，我遵循相同的模式。对于我上面的.search-bar，如果我们有一个.platform-ios.platform-cordova：not（.fullscreen）body class，我会添加一个边距。例如：

.platform-ios.platform-cordova:not(.fullscreen) .search-bar {
     margin-top: 20px;
}

这应该是正确答案。

Answer 2

使用StatusBar.styleDefault();的解决方案对我不起作用，但是调用StatusBar.overlaysWebView(false)完成了这项工作。

在调用StatusBar.overlaysWebView(false)之前，第一个屏幕截图是应用的UI，您可以看到iOS状态栏在应用上，用户无法点击整个菜单按钮区域：

现在，当我拨打StatusBar.overlaysWebView(false)时，iOS状态栏不再位于菜单按钮上：

Answer 3

最后问题解决了。

app.js中的

$ionicPlatform.ready(function() {
  if (window.cordova && $cordovaKeyboard) {
    $cordovaKeyboard.hideAccessoryBar(true);
  }
  if (window.StatusBar) {
    StatusBar.styleDefault();
  }
}

并且，如果那还没有解决问题。在index.html中，应该在最后一次导入cordova.js。

<head>
    ...

    <script src="cordova.js"></script>
</head>

这解决了我的问题。

Answer 4

我长期坚持同样的问题，上述解决方案都不适合我。最后，为了让状态栏在应用视图中重叠，我将以下preference添加到我的config.xml文件和中提琴中：

  <preference name="StatusBarOverlaysWebView" value="false" />
  <preference name="StatusBarBackgroundColor" value="#000000" />
  <preference name="StatusBarStyle" value="lightcontent" />

这个课程需要插件：cordova-plugin-statusbar "StatusBar"。

希望这有帮助。

Answer 5

添加保证金将无法正常工作。它只会在屏幕底部创建一个空白区域。

修复方法是确保您的应用的元标记中包含viewport-fit = cover。

Answer 6

尝试使用Ionic 5.x，只需将index.html放入

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Answer 7

此代码适用于离子3（3.7.1）在App.scss文件夹中打开app，然后添加以下代码：

.platform-ios 
{
  page-home { // replaced by your page HERE
     top: 20px !important;
  }
}

Answer 8

快速提醒一下，如果仅在某些子页面中发生此问题，则您可能在模态内使用了nav.push（）（已弃用）。要解决此问题，请使用您的模式

import { App, ViewController } from 'ionic-angular';

 constructor(
      public viewCtrl: ViewController
      public app: App
    ) {}

在下面替换push（）

  //this.navCtrl.push(nextPage);
  this.viewCtrl.dismiss();
  this.appCtrl.getRootNav().push(nextPage);

Answer 9

我找到了一个更好的选择。在AppModule.ts中更改为IonicModule.forRoot(MyApp, {statusbarPadding: true}),，然后从app.component.ts中删除或注释statusBar.overlaysWebView(true);，这将解决IOS问题。

Answer 10

在config.xml中添加以下代码

<preference name="SplashShowOnlyFirstTime" value="false" /><br>
<preference name="SplashScreen" value="screen" /><br>
<preference name="SplashScreenDelay" value="3000" /><br>

App.component.ts<br>
Inside constructor<br>
this.statusBar.overlaysWebView(false);<br>
this.statusBar.styleLightContent()

ios状态栏后面的离子离子视图头

10 个答案: