Question

我按了一个按钮让屏幕进入全屏，反之亦然。但是，用户还可以使用计算机/笔记本电脑按钮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，它将进入全屏模式，我希望按钮更改为查看正常模式。请帮我。谢谢

Answer 1

在Firefox 3中，window.fullScreen有效（https://developer.mozilla.org/en/DOM/window.fullScreen）。

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

} else {

}

Answer 2

window.innerHeight的技巧可以解决95％的问题。

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

对于5％的案例，页面上存在浮动元素问题导致window.innerHeight计算出错。

检测屏幕是否全屏显示

2 个答案: