View ionic Mobile app on Fullscreen

Question

I have an ionic mobile app. i runs on a mobile browser. it has static a header. i need to hide the address bar for that web app even when scrolling down, but this does not happen.

it has a header as follows,

<meta name="viewport" 
      content="initial-scale=1, 
      maximum-scale=1, 
      user-scalable=no, 
      width=device-width">

it runs on a native mobile browser. i built the app using console. so please help me to hide the address/header bar and run like facebook or other web apps

Answer 1

$cordova plugin add cordova-plugin-statusbar

In Ionic 2 need to install Cordova plugin status bar and we need to import the status bar from ionic native:

import {StatusBar} from 'ionic-native';


import {App, Platform} from 'ionic/ionic';
import {HomePage} from './home/home';
import './app.scss';

import {StatusBar} from 'ionic-native';

@Component({
 templateUrl: 'home.html'
})
export class MyApp {
 constructor(platform: Platform) {
  this.platform = platform;
  this.initializeApp();
  this.root = HomePage;

   }

 initializeApp() {
   this.platform.ready().then(() => {
   StatusBar.hide();
   });
  }
  }

Answer 2

I had the same issue, and solved it using this code:

$ionicPlatform.ready(function() {
  ionic.Platform.fullScreen();
  if (window.StatusBar) {
    return StatusBar.hide();
  }
});

Answer 3

You can install the statusbar plug-in:

$ cordova plugin add org.apache.cordova.statusbar

or for cordova 5.0+:

$ cordova plugin add cordova-plugin-statusbar

and hide the status bar: StatusBar.hide();

.controller('MyCtrl', function($scope) {
  ionic.Platform.ready(function() {
    // hide the status bar using the StatusBar plugin
    StatusBar.hide();
  });
});

Some more info here and a working app here.

UPDATE for Ionic 2

In Ionic 2 things are a bit different. We still need to install cordova plugin statusbar but we need to import the statusbar from ionic native:

import {StatusBar} from 'ionic-native';

The main class should roughly look like this:

import {App, Platform} from 'ionic/ionic';
import {HomePage} from './home/home';
import './app.scss';

import {StatusBar} from 'ionic-native';

@App({
  template: `
    <ion-nav [root]="root"></ion-nav>
    <ion-overlay></ion-overlay>
  `,
})
export class MyApp {
  constructor(platform: Platform) {
    this.platform = platform;
    this.initializeApp();
    this.root = HomePage;

  }

  initializeApp() {
    this.platform.ready().then(() => {
      console.log('Platform ready');
      StatusBar.hide();
    });
  }
}

The code is borrowed from the ionic native repository. A good tutorial can be found here.