

Monaca を使ってアプリ開発しているのですが下の画像のようにツールバーの上に空白ができてしまいます。

[画面 http://ryo110isa.main.jp/ios.png](http://ryo110isa.main.jp/ios.png)

Android の場合はこのようなことにはなりません。

いろいろやってみると、 AngularJS を使ったときだけ空白ができるようです。

ちなみに `index.html` は

[code]

    <!DOCTYPE HTML>
    <html  ng-app="myApp">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/style.css">
        <script src="js/app.js"></script>
    </head>
    
    <body ng-controller = "Page1Ctrl">
        <ons-tabbar var="tabbar" >
            <ons-tabbar-item
                icon="home"
                label="ホーム"
                page="navigator/navigator1.html"
                active="true"></ons-tabbar-item>
            <ons-tabbar-item
                icon="fa-book"
                label="メニュー"
                page="navigator/navigator2.html"></ons-tabbar-item>
            <ons-tabbar-item
                icon="fa-star-o"
                label="クーポン"
                ng-click="on_search_btn()"></ons-tabbar-item>
            <ons-tabbar-item
                icon="fa-phone"
                label="予約"
                page="navigator/navigator4.html"></ons-tabbar-item>
        </ons-tabbar>
    </body>
    </html>
    
[/code]

としております。

なぜでしょうか？素人で申し訳ございませんがご教授お願いいたします。


CC BY-SA 3.0
2015-01-21T10:47:26.983
4997
2020-02-25T10:57:00.043
2020-02-25T10:57:00.043
32986
7644
question
ios monaca css angularjs
Monaca + AngularJS のiOSアプリで、ツールバーの上に空白ができてしまう


OnsenUIを使っているので、下記のコードで空白がなくなると思います。

[code]

    ons.disableAutoStatusBarFill();  // (Monaca enables StatusBar plugin by default)
    
[/code]

「disableAutoStatusBarFill()」についての説明は、下記を参照ください。  
<http://ja.onsen.io/guide/overview.html#disableautostatusbarfill>


CC BY-SA 3.0
2015-01-21T11:21:26.267
5000
2015-01-21T11:21:26.267
7461
4997
answer