Phonegap Cordova - フルスクリーン表示後の黒いステータスバー

Question

私が覚えている限り、私はこの問題を抱えていました。私はそれがちょうど私の電話やエミュレーションから来たかもしれないと思ったが、私のアプリを公開した後、私はまだステータスバーのように見える、画面の下部にこの黒い四角形を参照してください。

私は私のconfig.xmlにこれをした後にこの問題が発生した

<preference name="android-build-tool"  value="gradle" /> 
<preference name="Fullscreen"    value="true"  /> 
<preference name="Orientation"    value="portrait" /> 

スクリーンショット：

UPDATE

私は下部の黒いバーが消えたことに気付きましたミニゲームゲームをクリックして、それを右クリック（奇妙なもの）してください。

新しいプロジェクトを作成しようとしましたが、config.xmlに全画面設定を入れても同じことが起こります。

それは上下にバー転送のように思える> _>

Answer 1

は問題がキャンバスの大きさを定義しているようです。しばらく前にこれを解くので、私は、これはそれを修正するものであるかどうかわからないんだけど：

var c = document.getElementById("canvas1"); 
var ctx = c.getContext("2d"); 
var pixelRatio = window.devicePixelRatio || 1; // get pixel ratio of device 
c.width = window.screen.width * pixelRatio; 
c.height = window.screen.height * pixelRatio; 
c.style.width = window.screen.width + 'px'; 
c.style.height = window.screen.height + 'px'; 

また、DOMは唯一のレンダリングに必要なスペースを記入しますデフォルトでは

Answer 2

をごindex.cssファイルを削除してみてください内容要素height:100%;を設定すると、その親要素の高さに対する高さが設定されます。可視要素を画面の高さにしたい場合は、画面の高さであるheight:1vh;という要素を設定することができます。これは予期せぬスクロール動作を引き起こす可能性があります。そのため、もう1つの方法は、すべての親要素height:100%;をhtmlドキュメントから設定することです。 CSSで ：

html, body, ... other parent elements ... { 
    height:100%; 
} 

Answer 3

あなたは、変更するための表示/キャンバスサイズをポーリングしたい場合があります。

黒いバンドは、システムのトップステータスバーとほぼ同じサイズに見えるので、ステータスバーがシステムによって削除/アニメーションされる直前に、あなたのアプリケーションがビューポートサイズを受け取っていると思われます。

Answer 4

私は​​3210の中で<preference name="Fullscreen" value="true" />だけを使用して、非常に同じ問題を経験しました。

私は当初Androidのステータスバーを考えましたが、そのトピックに関するいくつかの研究をしていました。この問題は、Cordovaラッパーがinitを終了するまで隠されていない他のAndroidシステムUIから発生します。ラッパーの計算されたサイズが間違っています。

長い検索し、あなたも言及したほぼすべてを試した後、私はプラグインにつまずい：

https://github.com/mesmotronic/cordova-plugin-fullscreen

を私は今confixでこれを使用しています。XML

<preference name="Fullscreen" value="true" /> 
<preference name="AndroidLaunchMode" value="singleInstance" /> 
<preference name="DisallowOverscroll" value="true" /> 
<preference name="KeepRunning" value="true" /> 

そしてこの方法の直接の最初したがってplayeは、これまでのAndroid 6.0、harwareナビゲーションおよびソフトウェアのナビゲーションデバイスと5.0.1でテストdeviceready

if (AndroidFullScreen) { 
    // Extend your app underneath the status bar (Android 4.4+ only) 
    AndroidFullScreen.showUnderStatusBar(); 

    // Extend your app underneath the system UI (Android 4.4+ only) 
    AndroidFullScreen.showUnderSystemUI(); 

    // Hide system UI and keep it hidden (Android 4.4+ only) 
    AndroidFullScreen.immersiveMode(); 
} 

でトリガ。多分あなたを助けることができるかもしれません。

Answer 5

あなたはのAndroidManifest.xmlにandroid:theme="@android:style/Theme.Light.NoTitleBar.Fullscreen"修正プログラムを適用するためにコルドバのフックを使用するか、cordova@6.4.0始まる​​3210に<edit-config>を使用することができます。

<widget ... xmlns:android="http://schemas.android.com/apk/res/android"> ... <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity"> <activity android:theme="@android:style/Theme.NoTitleBar.Fullscreen" /> </edit-config> ... </widget>

出典：Cordova fullscreen splash screen on Android still shows title bar

Answer 6

私が直面しています同じ問題。それはほとんど私のために風景モードで発生します。 私はsamsung s7とsamsung tab2を持っています。 s7で20回以上発生します tab2上では常に起こります。 何かが間違っているときに私は（画素率との相関で）screenheight対身長をチェックして

を検出することができ、私はAndroidFullScreenを適用しないとトリック これまでのところ、すべてがタブレット上に固定されている、ではこれ以上暗いバーボトム。しかし、s7のために私はまだこの問題があります。 s7のピクセル比率は4です。タブ2のピクセル比率は1です。

Answer 7

私は同じ問題がありました。コルドバのステータスバーのプラグインを使用すると、私のためにそれを修正： http://cordova.apache.org/docs/en/6.x/reference/cordova-plugin-statusbar/index.html#installation

は、プラグインをインストールします。

cordova plugin add cordova-plugin-statusbar 

config.xmlでフルスクリーンの設定を削除し、代わりにプラグインを追加します。

<plugin name="cordova-plugin-statusbar" spec="2.2.2" /> 

コールJavaScriptのステータスバーを非表示にするStatusBar.hide（）。例：

$(document).ready(function(){ 
    document.addEventListener("deviceready", function(){ 
     StatusBar.hide(); 
    }, false); 
}); 

Camparison Screenshot - Before and After