jQuery 检测全屏模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16755129/
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
Detect fullscreen mode
提问by Annie
Modern desktop version of IE 10 is always fullscreen.
IE 10 的现代桌面版本始终是全屏的。
There is a living specificationfor :fullscreenpseudo-class on W3
W3 上有一个关于伪类的活规范:fullscreen
But when I tried to detect fullscreen with jQuery version 1.9.x and 2.x:
但是当我尝试使用 jQuery 1.9.x 和 2.x 版检测全屏时：
$(document).is(":fullscreen")
it threw this error:
它抛出了这个错误：
Syntax error, unrecognized expression: fullscreen
语法错误，无法识别的表达式：全屏
Questions:
问题：
Is it because jQuery doesn't recognize this standard yet or IE10?
What is the legacyway of checking fullscreen mode? I am expecting following results:
function IsFullScreen() { /* Retrun TRUE */ /* If UA exists in classic desktop and not in full screen */ /* Else return FALSE */ }Can we do it without browser sniffing?
是因为 jQuery 还不承认这个标准还是 IE10？
检查全屏模式的传统方法是什么？我期待以下结果：
function IsFullScreen() { /* Retrun TRUE */ /* If UA exists in classic desktop and not in full screen */ /* Else return FALSE */ }我们可以在没有浏览器嗅探的情况下做到吗？
回答by Niet the Dark Absol
As you have discovered, browser compatibility is a big drawback. After all, this is something very new.
正如您所发现的，浏览器兼容性是一个很大的缺点。毕竟，这是非常新的东西。
However, since you're working in JavaScript, you have far more options available to you than if you were just using CSS.
但是，由于您使用的是 JavaScript，因此与仅使用 CSS 相比，您有更多的选择。
For example:
例如：
if( window.innerHeight == screen.height) {
// browser is fullscreen
}
You can also check for some slightly more loose comparisons:
您还可以检查一些稍微宽松的比较：
if( (screen.availHeight || screen.height-30) <= window.innerHeight) {
// browser is almost certainly fullscreen
}
回答by anurag_29
an event is fired when the browser changes full screen mode. You can use that to set a variable value, which you can check to determine if the browser is full screen or not.
当浏览器改变全屏模式时会触发一个事件。您可以使用它来设置变量值，您可以检查该值以确定浏览器是否全屏。
this.fullScreenMode = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen; // This will return true or false depending on if it's full screen or not.
$(document).on ('mozfullscreenchange webkitfullscreenchange fullscreenchange',function(){
this.fullScreenMode = !this.fullScreenMode;
//-Check for full screen mode and do something..
simulateFullScreen();
});
var simulateFullScreen = function() {
if(this.fullScreenMode) {
docElm = document.documentElement
if (docElm.requestFullscreen)
docElm.requestFullscreen()
else{
if (docElm.mozRequestFullScreen)
docElm.mozRequestFullScreen()
else{
if (docElm.webkitRequestFullScreen)
docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT)
}
}
}else{
if (document.exitFullscreen)
document.exitFullscreen()
else{
if (document.mozCancelFullScreen)
document.mozCancelFullScreen()
else{
if (document.webkitCancelFullScreen)
document.webkitCancelFullScreen();
}
}
}
this.fullScreenMode= !this.fullScreenMode
}
回答by Bekim Bacaj
This will work on IE9+ and other modern browsers
这将适用于 IE9+ 和其他现代浏览器
function isFullscreen(){ return 1 >= outerHeight - innerHeight };
Using "1" (instead of zero) because the system, at times, might just reserve a one pixel height for mouse interaction with some hidden or sliding command bars, in which case the fullscreen detection would fail.
使用“1”（而不是零）是因为系统有时可能只为鼠标与某些隐藏或滑动命令栏的交互保留一个像素的高度，在这种情况下全屏检测将失败。
- will also workfor any separate document-elementgoing on the full screen mode at any time.
- 也适用于任何时候在全屏模式下运行的任何单独的文档元素。
回答by Parth
Use fullscreenchangeevent to detect a fullscreen change event, or if you don't want to handle vendor prefixes than you can also listen to the resizeevent (the window resize event that also triggers when fullscreen is entered or exited) and then check if document.fullscreenElementis not null to determine if fullscreen mode is on. You'll need to vendor prefix fullscreenElementaccordingly. I would use something like this:
使用fullscreenchange事件来检测全屏更改事件，或者如果您不想处理供应商前缀，则也可以侦听该resize事件（进入或退出全屏时也会触发的窗口调整大小事件），然后检查是否document.fullscreenElement不为空以确定是否开启全屏模式。您需要相应地提供供应商前缀fullscreenElement。我会使用这样的东西：
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement ||
document.webkitFullscreenElement || document.msFullscreenElement;
https://msdn.microsoft.com/en-us/library/dn312066(v=vs.85).aspxhas a good example for this which I quote below:
https://msdn.microsoft.com/en-us/library/dn312066(v=vs.85).aspx有一个很好的例子，我在下面引用：
document.addEventListener("fullscreenChange", function () {
if (fullscreenElement != null) {
console.info("Went full screen");
} else {
console.info("Exited full screen");
}
});
回答by Günay Gültekin
It is working in IE 8 and I am writing a specific web page for IE 8. I do not need to check if the other browsers support this or not.
它在 IE 8 中工作，我正在为 IE 8 编写一个特定的网页。我不需要检查其他浏览器是否支持这个。
function isFullScreen(){
return window.screenTop == 0 ? true : false;
}
回答by Petryk
Here is another solution which works in IE 11:
这是另一个适用于 IE 11 的解决方案：
$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function() {
var isFullScreen = document.fullScreen ||
document.mozFullScreen ||
document.webkitIsFullScreen || (document.msFullscreenElement != null);
if (isFullScreen) {
console.log('fullScreen!');
} else {
console.log('no fullScreen!');
}
});
});
回答by ColCh
In Safari on iPhone, webkitDisplayingFullscreenproperty will return trueif <video>is playing in fullscreen. Ref: https://developer.apple.com/documentation/webkitjs/htmlvideoelement/1630493-webkitdisplayingfullscreen
在 iPhone 上的 Safari 中，如果全屏播放，webkitDisplayingFullscreen属性将返回。参考：https: //developer.apple.com/documentation/webkitjs/htmlvideoelement/1630493-webkitdisplayingfullscreentrue<video>
回答by lowzhao
Reading MDN Web docs, I like this native method.
阅读 MDN Web 文档，我喜欢这种原生方法。
https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/fullscreenElement
https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/fullscreenElement
function is_fullscreen(){
return document.fullscreenElement != null;
}
or fancier
或发烧友
let is_fullscreen = () => !! document.fullscreenElement
This method also works when you open developer tools in browser. Because fullscreen is applied to a particular element, null means none of it is in fullscreen.
当您在浏览器中打开开发人员工具时，此方法也适用。因为 fullscreen 应用于特定元素，所以 null 意味着它没有全屏显示。
You can even extend to check a particular element eg:
您甚至可以扩展以检查特定元素，例如：
function is_fullscreen(element=null){
return element != null? document.fullscreenElement == element:document.fullscreenElement != null;
}
Which only return true if currently is fullscreen and (element is null or element is the fullscreened element)
如果当前是全屏并且（元素为空或元素是全屏元素），则仅返回true
回答by Hyman
I worked out a good way of doing this:
我想出了一个很好的方法来做到这一点：
w = $('body').width();
if (w == '4800' || w == '4320' || w == '4096' || w == '3200' || w == '3072' || w == '2880' || w == '2560' || w == '2400' || w == '2160' || w == '2048' || w == '1920' || w == '1800' || w == '1620' || w == '1600' || w == '1536' || w == '1440' || w == '1280' || w == '1200' || w == '1152' || w == '1080' || w == '1050' || w == '1024' || w == '960' || w == '900' || w == '864' || w == '800' || w == '768' || w == '720') {
//User is fullscreen
}
Then set the body default width to:
然后将正文默认宽度设置为：
body { width: calc(100% - 1px) }
回答by Joshua Olson
Here's another solution that might work for you:
这是另一个可能适合您的解决方案：
function isFullScreen() {
return Math.abs(screen.width - window.innerWidth) < 10;
}
I prefer to use width since it will help work around tabs and developer info at the bottom.
我更喜欢使用宽度，因为它有助于解决底部的选项卡和开发人员信息。
