2017-11-27 16 views
1

ハイブリッドアプリケーションを作成するために、onsenUIフレームワークをCordovaと組み合わせて使用​​しています。ons-toolbarとstatusbarのギャップiOS

何らかの理由で、ツールバー(テキスト)とiOSステータスバー(iPhone 6s、iOS 11)の間隔が大きくなっていることを確認してください。例のリンクを参照してください。この問題のトラブルシューティングするには、私自身のコードが原因ではないでは問題は、私は同じiPhone(無独自のCSSファイルに何が起こったかを見るためにhttps://onsen.io/v2/api/js/ons-toolbar.htmlのツールバー参照の非常に簡単な例のコードを取ったことを確認するexample of toolbar

使用される)、同じ挙動が観察される。

私はCordovaを使用してアプリケーションを構築し、標準Cordovaアプリテンプレートの一部であるconfig.xmlの基本設定を使用しています。私は温泉のバージョン2.8.2を適用しています。また、CDN版を試しました。私はXcode経由でビルドをテストするために本物のiPhoneを使用しています。

私はCordovaではないことを確認するために、Framework7のプレーンHTMLとキッチンシックを使用しました。同じCordovaセットアップではギャップがないため、何かがOnsenセットアップに関連しています。

ブラウザでアプリを実行しているときにギャップは表示されません。

どういうことが起こっているのか、同じ動作やアイデアがありますか?

答えて

0

あなたはjcesarmobileこんにちは、はい、これは確かにギャップを削除し、あなたのindex.htmlのビューポートmetaタグ

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

viewport-fit=coverを追加する必要があります。ありがとう、それは便利な修正です。でもおもしろいことに、なぜ温泉のために突然特別に必要なのかなと思います。プレーンhtmlやFramework7のようなフレームワークではありません。温泉の枠組みの中で何か変わったはずなのに、多分iPhone Xの互換性に関係するかもしれない。 「スプラッシュスクリーン」の後には、ただ1つしかありません。私は、画面全体が満杯になる前に、一瞬の間、小さな黒い棒が底にあるように見えます。プレカバー状態でなければなりません。アプリの色にマッチする全体的な背景色を設定すると、これが隠されます。 – Tom

+0

これは、iOS 11をターゲットとするすべてのアプリで必要となります.Frame Framework7はすでにテンプレートに追加している可能性があります。あなたがCordovaアプリケーションを作成した場合、同じ問題がそこに表示されます。 – jcesarmobile

+0

'ons.disableAutoStatusBarFill()'を使っても問題は解決されていることが分かりました。 'viewport-fit = cover'に関しては、この機能は働きますが、ビューを上にシフトさせ、下にギャップを残します。そこで、私は今、ビューポートの設定を削除しました。次の課題は、 'ons.disableAutoStatusBarFill()'がそのデバイスには適合せず、おそらくはビューポートソリューションを必要とするため、iPhone Xのすべての機能を有効にすることです。別の(stackoverflow)トピックです。 – Tom

関連する問題