2017-10-16 4 views
0

画面がフルスクリーンになるようにボタンを作りました。ただし、コンピュータ/ラップトップボタンF11を使用してフルスクリーンに移動するためのショートカットもあります。は、画面がフルスクリーンになっているかどうかを検出します。

<html> 
<head> 
<title> 
Zoom 
</title> 
</head> 
<body> 
<script type="text/javascript"> 
//fullscreen(); 
function fullscreen() { 
    var change = document.getElementById("fullscreen"); 
    if ((document.fullScreenElement && document.fullScreenElement !== null) || 
     (!document.mozFullScreen && !document.webkitIsFullScreen)) { 
     if (document.documentElement.requestFullScreen) { 
      document.documentElement.requestFullScreen(); 
     } else if (document.documentElement.mozRequestFullScreen) { 
      document.documentElement.mozRequestFullScreen(); 
     } else if (document.documentElement.webkitRequestFullScreen) { 
      document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 
     } 
     change.innerHTML = "click to go Normal Screen"; 
    } 
    else 
    { 
     if (document.cancelFullScreen) { 
      document.cancelFullScreen(); 
     } else if (document.mozCancelFullScreen) { 
      document.mozCancelFullScreen(); 
     } else if (document.webkitCancelFullScreen) { 
      document.webkitCancelFullScreen(); 
     } 
     change.innerHTML = "click to go Full Screen"; 
    } 
} 

</script> 
<button id="fullscreen" onclick="fullscreen()">Click to go Full Screen</button> 
<h1>hi can u see me</h1> 
<h2>hahahahah</h2> 
<h3>blablablabla</h3> 
<h4>heheheheh</h4> 
</body> 
</html> 

私のコードに基づいて、デフォルトでは、画面はフルスクリーンモードではありません。ユーザーがボタンをクリックすると、フルスクリーンモードになり、ボタンのラベルも通常の画面を表示するように変わります。しかし、ユーザーがF11をクリックすると、フルスクリーンモードになり、ボタンを通常モードを表示するように変更します。私を助けてください。ありがとう

+0

この質問は数年ですが、重複している可能性があります。https://stackoverflow.com/questions/16755129/detect-fullscreen-mode – Nick

+0

ユーザーがF11キーを押すと、Fullscreen Web APIに従ってページがフルスクリーンモードになりませんブラウザは、OSによるが、ページそのものではないかもしれない。したがって、両方のモードが同じではなく、ユーザーがF11を押した場合でも、FS APIの要求を依然として行うことができます。 – Kaiido

答えて

0

Firefox 3では、window.fullScreenは動作します(https://developer.mozilla.org/en/DOM/window.fullScreen)。

if((window.fullScreen) || 
    (window.innerWidth == screen.width && window.innerHeight == screen.height)) { 

} else { 

} 
+0

誰が私を投票したのですか?なぜですか? –

0

window.innerHeightのトリックは、ケースの95%で動作します。 5%の例については

if(window.innerHeight == screen.height) { 
    // browser is fullscreen 
} 

window.innerHeight計算がゆがんで行く原因ページ上の浮動要素に問​​題がありました。

+0

'innerHeight'はF11全画面モードでは機能しないので、あなたは' outerHeight'を意味すると思います。 – Kaiido

関連する問題