次のスクリプトを使用して、Webアプリを全画面表示にします...
_function enterFullscreen(){
var element = document.getElementById('container');
if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
l('Fullscreen Mode entered','internal');
}
_
そのため、$('button.toggle-fullscreen').click(function(){ enterFullscreen(); });
を介してトリガーボタンをクリックすると、実際には全画面表示になり、要素のみが黒くなります。黒だけで、他には何もありません。
誰でもこれを修正する方法を知っていますか?
参考までに、Chrome 27。
ブラウザのフルスクリーン「ビジュアル環境」のデフォルトの背景色は黒です。コンテンツは実際にはありますが、現在は黒い背景に黒いテキストなので、表示されません(ハイライト表示またはCtrl+A
を押してみてください)自分で確認してください)。
背景を別の色にする場合は、CSSルールを指定して、background-color
プロパティをデフォルト以外の値に設定する必要があります。したがって、あなたの場合:
#container:fullscreen {
background-color: rgba(255,255,255,0);
}
#container:-webkit-full-screen {
background-color: rgba(255,255,255,0);
}
#container:-moz-full-screen {
background-color: rgba(255,255,255,0);
}
トリックを行う必要があります。 (適切なベンダーバージョンを使用していることを確認してください-:-webkit-full-screen
および:-moz-full-screen
-仕様が確定するまで 詳細についてはMDNを参照してください 。)
実際、多分ちょうど
*:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
background-color: rgba(255,255,255,0);
}
@DevilishDBによる編集:透明なBGにrgbaを使用し、前のものを機能させるために*セレクターを追加しました
質問の正確な答えはわかりませんが、この情報が役立つ場合があります。
enterFullscreen(document.body);
で同様の黒い背景の問題が発生しました。行をenterFullscreen(document.documentElement);
に変更すると、背景色が正常になりました。私が使用したcssはbody{background-color: #D7D7D7; margin: 0px;}
。
理由はわかりませんが、body要素の背景が全画面表示されない、または透明にならないようです...
私はhtml要素に背景色を設定することでこれを修正しました、そしてそれはうまくいきます:
html {
background-color: #ffffff;
/* Or any color / image you want */
}
他の答えはどれもうまくいきません(Chrome 70またはFF 63)
これをCSSファイルに追加すると機能します
::backdrop
{
background-color: white;
}
メインの解決策は私にはうまくいきませんでした:-(私は別の解決策を見つけましたが、はい、CSSで:
:-webkit-full-screen, :fullscreen, :-ms-fullscreen, :-moz-full-screen {
position: fixed;
width: 100%;
height: 100%;
top: 0;
background: none;}
これは私の要素の位置付けに関するものだと理解していますが、確かではありません。誰かに助けを願っています。さようなら。
私はこの問題のトリックを見つけるのに何時間も費やしました。
私はそれを終えて終わりました:
次に:
FirefoxとChromeで動作します
::backdrop {
z-index:0;
background-color: white !important;
}
html, *:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
background-color: white !important;
z-index:1;
}