Question

可能重复：
Detecting if a browser is in full screen mode

有没有办法检查浏览器当前是否处于全屏模式（用户按下f11后）？

类似的东西：

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

感谢。

Steerpike的答案非常好，但我的评论是：

非常感谢，但答案并非如此足以满足FF。在Chrome中我可以设置小容忍，但在FF urlbar和tabs需要一段时间消失，这意味着按下后 f11，检测到window.innerWidth是还是太小了。

Answer 1

这适用于所有新浏览器：

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

Answer 2

在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 3

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

} else {

}

（警告：浏览器镶边可能会与高度比较混淆，但宽度检查应该很明显）

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）。

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

Answer 5

足够简单：使用$(window).width()和$(window).height()查找浏览器视口，如果它们符合一组定义的视口大小（600 x 480,1280 x 800等），那么你可以知道它很可能是全屏的。您还可以设置事件处理程序，如fll键和其他可能的快捷方式，以定义浏览器全屏。

Answer 6

这适用于主流浏览器（即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; }
}

检查浏览器是否全屏显示

6 个答案: