检查浏览器是否全屏

IT技术 javascript jquery
2021-02-21 07:05:40

可能的重复:
检测浏览器是否处于全屏模式

有没有办法检查浏览器当前是否处于全屏模式(在用户按下 f11 之后)?

就像是:

if (window.fullscreen) {
  // it's fullscreen!
}
else {
  // not fs!
}

谢谢。

Steerpike 的回答很好,但我的评论是:

非常感谢,但这个答案对 FF 来说还不够。在 Chrome 中我可以设置一个小的容差,但是在 FF 中,urlbar 和 tabs 需要一段时间才能消失,这意味着按 f11 后,检测到的 window.innerWidth 仍然太小。

6个回答

这适用于所有新浏览器:

if (!window.screenTop && !window.screenY) {
    alert('Browser is in fullscreen');
}
不,不正确,在 Windows 上,如果您将浏览器窗口附加到屏幕顶部,则该条件也将成立。
2021-04-20 07:05:40
很好的答案,但你能更具体地说明“新”吗?
2021-04-23 07:05:40
在 chrome 中最大化也会触发这个。
2021-05-14 07:05:40
今天不适用于 chrome
2021-05-14 07:05:40
在 IE8、FF3.6、FF12 中测试。适用于所有这些。
2021-05-15 07:05:40

在 Firefox 3 中,window.fullScreen 有效(https://developer.mozilla.org/en/DOM/window.fullScreen)。

所以,你可能会做这样的事情:

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

} else {

}
fullscreenElement 仅适用于 JS 触发的全屏,不适用于用户按 F11。
2021-04-23 07:05:40
漂亮,这救了我的屁股。
2021-05-02 07:05:40
只是一个供参考:这个(下半场)不会,如果你有浏览器的Web控制台打开,你的工作,因为你正在测试此。😒 此外,至少在 2017 年,全屏 API 在所有浏览器中的实现与中彩票一样一致。
2021-05-03 07:05:40
天啊,这个答案是在差不多 7 年前为 Firefox 3 发布的(有时我认为这里接受的答案需要一个截止日期)。我既惊讶又不惊讶他们还没有标准。甚至CSS Stuff仍然是实验性的。
2021-05-11 07:05:40
if(window.innerWidth == screen.width && window.innerHeight == screen.height) {

} else {

}

(警告:浏览器 chrome 可能会与高度比较混淆,但宽度检查应该很准确)

不要忘了,innerWidthinnerHeight不支持通过IE浏览器。
2021-04-25 07:05:40
是的,支票肯定需要一些宽容。除此之外:+1
2021-05-04 07:05:40
非常感谢,但这个答案对 FF 来说还不够。在 Chrome 中我可以设置一个小的容差,但是在 FF 中,urlbar 和 tabs 需要一段时间才能消失,这意味着按 f11 后,检测到的 window.innerWidth 仍然太小。
2021-05-08 07:05:40
我希望你会有一些差异,因为有些浏览器在顶部仍然有几个像素保留给一个栏,当你将鼠标悬停在它上面时它会向下滑动,这会取消这个检查。
2021-05-10 07:05:40
您仍然可以接受更大的容差,因为大多数浏览器至少有一个地址栏,您可以猜测高度差可能是 n 个像素。
2021-05-16 07:05:40

我最终得到了以下解决方案:

function _fullscreenEnabled() {
    // FF provides nice flag, maybe others will add support for this later on?
    if(window['fullScreen'] !== undefined) {
      return window.fullScreen;
    }
    // 5px height margin, just in case (needed by e.g. IE)
    var heightMargin = 5;
    if($.browser.webkit && /Apple Computer/.test(navigator.vendor)) {
      // Safari in full screen mode shows the navigation bar, 
      // which is 40px  
      heightMargin = 42;
    }
    return screen.width == window.innerWidth &&
        Math.abs(screen.height - window.innerHeight) < heightMargin;
  }

它适用于我关心的每个浏览器(Chrome、FF、IE、Safari/Mac、Opera)。

更新:它不适用于 Opera/Mac,Mac 上的 Opera 在全屏模式下仅隐藏“通用”OSX 菜单,因此高度仅相差几个像素,这对我来说太危险了。

在 chrome/linux 上,“if($.browser.webkit”中断
2021-04-20 07:05:40
它不适用于 Chromium(在 linux 上)和多个屏幕—— screen.width/height 似乎报告主屏幕大小,即使页面在辅助监视器上是全屏的。
2021-04-29 07:05:40
这需要 JQuery 才能发挥作用。
2021-05-11 07:05:40

这适用于主要浏览器(即,ff,opera,chrome)

function isFullscreen(){

  if($.browser.opera){

    var fs=$('<div class="fullscreen"></div>');
    $('body').append(fs);

    var check=fs.css('display')=='block';
    fs.remove();

    return check;
  }

  var st=screen.top || screen.availTop || window.screenTop;

  if(st!=window.screenY){

    return false;
  }

  return window.fullScreen==true || screen.height-document.documentElement.clientHeight<=30;
}

歌剧的CSS:

.fullscreen { display: none; }

@media all and (view-mode: fullscreen){

  .fullscreen { display: block; }
}