32

次のスクリプトを使用して、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 を使用しています。

4

7 に答える 7

21

あなたの質問に対する正確な答えはわかりませんが、次の情報が役立つかもしれません。

で同様の黒い背景の問題がありましenterFullscreen(document.body);た。線を に変更したら、背景色が正常になりましたenterFullscreen(document.documentElement);。私が使用したcssはbody{background-color: #D7D7D7; margin: 0px;}.

于 2014-07-13T21:03:53.180 に答える
11

理由はわかりませんが、body要素の背景がフルスクリーンで表示されない、または透明になるようです...

背景色を html 要素に設定することでこれを修正しましたが、問題なく動作します。

html {
    background-color: #ffffff;
    /* Or any color / image you want */
}
于 2016-05-30T09:57:19.527 に答える
2

主な解決策は私にはうまくいきませんでした:-(私は別の解決策を見つけましたが、はい、CSSで:

:-webkit-full-screen, :fullscreen, :-ms-fullscreen, :-moz-full-screen {
position: fixed;
width: 100%;
height: 100%;
top: 0; 
background: none;}

これは私の要素の位置のためであることは理解していますが、よくわかりません。誰かに助けてほしい。さようなら、そしてありがとう。

于 2016-08-16T09:57:00.450 に答える
0

受け入れられた回答はほとんどのブラウザーで機能しますが、私のテストでは IE11 では機能しません。私にとって、これは現在の Chrome、Firefox、Edge、IE 11、および iOS の Safari で機能します。

CSS:

body {
    background-color: #ffffff;
}

JS:

function openFullscreen () {
    let isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    let elem = isSafari ? document.documentElement : document.body;
    let openFn = elem.requestFullscreen || elem.mozRequestFullScreen || elem.webkitRequestFullscreen || elem.msRequestFullscreen;
    if (openFn) {
        openFn.call(elem);
    }
};

body編集:要素を使用すると機能しない iOS/Safari の例外を追加しました。

于 2020-04-28T07:40:04.640 に答える