检查浏览器是否全屏[重复]

时间:2022-06-15 18:04:18

Possible Duplicate:
Detecting if a browser is in full screen mode

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

Is there a way to check if a browser is currently in fullscreen mode (after the user pressed f11)?

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

Something like:

就像是:

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

Thanks.

谢谢。

Steerpike's answer is pretty good, but my comment:

Steerpike的答案非常好,但我的评论是:

Thanks a lot, but this answer is not sufficient for FF. In Chrome I can set a small tolerance, but in FF the urlbar and tabs takes a while to disappear, which means after pressing f11, the detected window.innerWidth is still too small.

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

6 个解决方案

#1


17  

In Firefox 3, window.fullScreen works (https://developer.mozilla.org/en/DOM/window.fullScreen).

在Firefox 3中,window.fullScreen可以工作(https://developer.mozilla.org/en/DOM/window.fullScreen)。

So, you could potentially do something like this:

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

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

} else {

}

#2


24  

This works for all new browsers :

这适用于所有新浏览器:

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

#3


9  

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

} else {

}

(Warning: The browser chrome may muck with the height comparisons but the width checks should be pretty spot on)

(警告:浏览器镶边可能会与高度比较混淆,但宽度检查应该相当明显)

#4


3  

I've ended up with following solution:

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

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;
  }

Which works in every browser I care about (Chrome, FF, IE, Safari/Mac, Opera).

哪个适用于我关注的每个浏览器(Chrome,FF,IE,Safari / Mac,Opera)。

Update: It doesn't work on Opera/Mac, Opera on Mac while in full screen mode hides only the 'common' OSX menu, thus height differs only by few pixels which is too dangerous for me.

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

#5


2  

this works on major browsers (ie,ff,opera,chrome)

这适用于主流浏览器(即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 for opera:

歌剧的css:

.fullscreen { display: none; }

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

  .fullscreen { display: block; }
}

#6


1  

Simple enough: Find the browser viewport using $(window).width() and $(window).height(), and if they conform to a set of defined viewport sizes (600 x 480, 1280 x 800, etc.), then you can know that it is most likely fullscreen. Also you can set event handlers for like the fll key and other possible shortcuts to define browser fullscreen.

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

#1


17  

In Firefox 3, window.fullScreen works (https://developer.mozilla.org/en/DOM/window.fullScreen).

在Firefox 3中,window.fullScreen可以工作(https://developer.mozilla.org/en/DOM/window.fullScreen)。

So, you could potentially do something like this:

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

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

} else {

}

#2


24  

This works for all new browsers :

这适用于所有新浏览器:

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

#3


9  

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

} else {

}

(Warning: The browser chrome may muck with the height comparisons but the width checks should be pretty spot on)

(警告:浏览器镶边可能会与高度比较混淆,但宽度检查应该相当明显)

#4


3  

I've ended up with following solution:

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

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;
  }

Which works in every browser I care about (Chrome, FF, IE, Safari/Mac, Opera).

哪个适用于我关注的每个浏览器(Chrome,FF,IE,Safari / Mac,Opera)。

Update: It doesn't work on Opera/Mac, Opera on Mac while in full screen mode hides only the 'common' OSX menu, thus height differs only by few pixels which is too dangerous for me.

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

#5


2  

this works on major browsers (ie,ff,opera,chrome)

这适用于主流浏览器(即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 for opera:

歌剧的css:

.fullscreen { display: none; }

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

  .fullscreen { display: block; }
}

#6


1  

Simple enough: Find the browser viewport using $(window).width() and $(window).height(), and if they conform to a set of defined viewport sizes (600 x 480, 1280 x 800, etc.), then you can know that it is most likely fullscreen. Also you can set event handlers for like the fll key and other possible shortcuts to define browser fullscreen.

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