检查浏览器是否处于全屏状态

Question

有没有一种方法可以检查浏览器是否处于全屏模式（用户按下f11后）？

类似这样的代码：

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

谢谢。

Steerpike的回答很好，但我的评论：

非常感谢，但这个答案对FF来说不够。在Chrome中，我可以设置一个小的容差，但在FF中，地址栏和选项卡需要一段时间才能消失，这意味着在按下F11之后，检测到的window.innerWidth仍然太小。

- Mark

---

你也可以使用 document.fullscreenElement 来获取元素，如果它存在则返回该元素，否则返回 null。内部和屏幕的宽度不可靠，例如，如果你打开开发者工具，内部尺寸将不同于屏幕尺寸。你可以将 document.onfullscreenchange 分配给此方法，在全屏和非全屏之间切换时得到即时响应。 - tscpp

现在有一个API： https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API - Claude Martin

Answer 1

这适用于所有新的浏览器：

if (!window.screenTop && !window.screenY) {
    alert('Browser is in fullscreen');
}

- Tom Ulatowski

---

好的回答，但你能更具体地解释一下“新”是什么意思吗？ - JohnFx

在 Chrome 最大化时也会触发这个问题。 - Josh

如果用户没有顶部面板，则无法正常工作。 - Vanuan

不，这并不正确，在Windows上，如果您将浏览器窗口附加到屏幕的顶部，那么该条件也将为真。 - igorpavlov

今天在Chrome上无法工作。 - Sebas

Answer 2

警告: 这个答案是针对一个非常旧的版本的Firefox发布的。你可能在这里找不到你要的答案，请继续寻找。

---

在Firefox 3中，window.fullScreen可用 (https://developer.mozilla.org/en/DOM/window.fullScreen)。

因此，你可以像这样做：

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

} else {

}

- user4815162342

---

提醒一下：如果您正在使用浏览器的 Web 控制台（您正在测试此内容，因此已经打开了），那么这个（后半部分）将无法工作。另外，至少截至2017年，所有浏览器中全屏API的实现几乎一致性等同于中彩票。 - John

哎呀，这个答案是在7年前发布的Firefox 3版本上的（有时我认为这里的接受答案需要一个过期日期）。我既惊讶又不惊讶他们还没有一个标准。即使是CSS Stuff也仍然处于实验阶段。 - user4815162342

截至18年 https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/fullscreenElement - Seph Reed

fullscreenElement 仅适用于由JS触发的全屏模式，而不适用于用户按下F11键。 - riv

如果像开发控制台这样的东西打开了，它就无法工作。 - Arvy

Answer 3

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

} else {

}

（警告：浏览器的chrome可能会对高度比较造成影响，但宽度检查应该非常准确）

- Steerpike

---

我想你可能希望有一些差异的余地，因为一些浏览器仍然在顶部保留了几个像素用于滑动时会弹出的栏，这将影响此检查。 - Alistair Evans

是的，这个检查肯定需要一些容差。除此之外：+1 - Pekka

不要忘记，IE不支持innerWidth和innerHeight。参考链接 - Christian C. Salvadó

非常感谢，但这个答案对于FF来说不够充分。在Chrome中，我可以设置一个小的容差，但在FF中，地址栏和标签需要一段时间才能消失，这意味着在按下f11后，检测到的window.innerWidth仍然太小。 - Mark

你应该考虑使用window.outerHeight来检测浏览器是否处于最大高度，相比于screen.height更加可靠。 - Ivan

Answer 4

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

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）中都能工作。

更新：在Mac上，全屏模式下的Opera只隐藏“常规”的OSX菜单，因此高度仅相差几个像素，这对我来说太危险了，所以它不能在Opera/Mac上工作。

- stoiczek

---

它在Chromium（Linux上）和多屏幕下无法工作--screen.width/height似乎报告主屏幕大小，即使页面在辅助显示器上全屏也是如此。 - DirtY iCE

在Chrome/Linux上，“if($.browser.webkit”会出现错误。 - Mladen Adamovic

这需要 JQuery 来运行。 - KTibow

Answer 5

这个在主流浏览器（IE、Firefox、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;
}

Opera浏览器的CSS：

.fullscreen { display: none; }

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

  .fullscreen { display: block; }
}

- giocondo sticca

Answer 6

简单来说：使用$(window).width()和$(window).height()查找浏览器视口，如果它们符合一组定义好的视口尺寸（600 x 480、1280 x 800等），那么你就可以知道它很可能是全屏。此外，你还可以设置事件处理程序，例如fll键和其他可能的快捷键，以定义浏览器全屏。

- Lucas

---

window.outerHeight和window.outerWidth表示浏览器窗口的外部尺寸。window.screen.height和window.screen.width表示当前显示面板的显示尺寸。如果这两个宽度/高度对相等并且指示合理的值（例如都指示为1920x1200），则可以假定该浏览器处于全屏状态。 - Gunnar Forsgren - Mobimation