Javascript 检查浏览器是否全屏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2863351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Checking if browser is in fullscreen
提问by Mark
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 仍然太小。
采纳答案by user4815162342
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 {
}
回答by Tom Ulatowski
This works for all new browsers :
这适用于所有新浏览器：
if (!window.screenTop && !window.screenY) {
alert('Browser is in fullscreen');
}
回答by Steerpike
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)
（警告：浏览器 chrome 可能会与高度比较混淆，但宽度检查应该很准确）
回答by stoiczek
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 菜单，因此高度仅相差几个像素，这对我来说太危险了。
回答by Lucas
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 fllkey and other possible shortcuts to define browser fullscreen.
很简单：使用$(window).width()和查找浏览器视口$(window).height()，如果它们符合一组定义的视口尺寸（600 x 480、1280 x 800 等），那么您就可以知道它很可能是全屏的。您还可以设置事件处理程序，例如fll键和其他可能的快捷方式来定义浏览器全屏。
回答by giocondo sticca
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; }
}
