在全屏查看离子移动应用程序 [英] View ionic Mobile app on Fullscreen

问题描述

我有一个离子移动应用程序。我在移动浏览器上运行。它有静态标题。我需要隐藏该网络应用程序的地址栏，即使向下滚动，但这不会发生。

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.

它有一个标题如下，

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

它在原生移动浏览器上运行。我使用控制台构建了应用程序。
所以请帮我隐藏地址/标题栏并像facebook或其他网络应用程序一样运行

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

推荐答案

你可以安装状态栏插件：

You can install the statusbar plug-in:

$ cordova plugin add org.apache.cordova.statusbar

或 cordova 5.0+ ：

$ cordova plugin add cordova-plugin-statusbar

并隐藏状态栏： 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.

Ionic 2更新

在Ionic 2中有点不同。
我们仍然需要安装 cordova插件状态栏，但我们需要从离子原生体导入状态栏：

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';

主要类应大致如下：

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.

这篇关于在全屏查看离子移动应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！