いろいろやる課、書く係

いろいろなことを、たんたんと記録するブログ

requestFullscreenが効かない/画面が黒くなる

前回、AndroidChromeで全画面表示をさせましたが……

sakimika.hateblo.jp

Windowsでデモするときにもちょっと対応したいなと思い、またGoogleさんに語り掛けました。

gray-code.com

document.body.requestFullscreen();

これでいけるで~と出てきたので、

window.onload

に仕込んだんですが、効かない……???

よく考えたら、onLoadじゃできないか……

イヤだよね、onLoadでいきなり全画面表示されたらね……

開発モードでやったら、ちゃんとError出てたよ。Chromeのデペロッパツールの存在を忘れている素人。

てことで

document.body.onclick

で、全画面と解除を切り替えることにしました。

が、全画面表示にすると、画面が黒くなるんですよ……
は???なんで???

てか上のリンクのサンプルも、よく見たら画面黒くなってるね???
え、全画面ってそういうものでしたっけ???

F11では普通に全画面表示になりますよ?

いろいろやってみたところ、

mebee.info

document.documentElement.requestFullscreen();

だと普通にできました。

bodyだと黒くなるのなんでかな……

あとは、いま全画面かどうかを確認して切り替えを……

終結果はこれ。

    document.body.onclick = function (event) {
        if(document.fullscreenElement) {
            document.exitFullscreen();
        } else {
            document.documentElement.requestFullscreen();
        }
    }

とりあえず今回は、人力での全画面/解除で仕様を満たします。

付け焼刃WEBマンが過ぎますね。

 

しかし……実はjavaScriptで定期的にリロードをしていて……

そうすると全画面は解除されますねぇ……

metaタグで最大化してたら大丈夫なんだけれど。(前回の方法)

今後Androidじゃなくなったらどうしよっかな……

解決した

次回、キヨスクモードを発見!の回

sakimika.hateblo.jp