IE 10 的现代桌面版本始终是全屏的。
W3 上有一个关于伪类的活规范:fullscreen
但是当我尝试使用 jQuery 1.9.x 和 2.x 版检测全屏时：
$(document).is(":fullscreen")
它抛出了这个错误：
语法错误，无法识别的表达式：全屏
是因为 jQuery 还不承认这个标准还是 IE10？
检查全屏模式的传统方法是什么？我期待以下结果：
function IsFullScreen() {
/* Retrun TRUE */
/* If UA exists in classic desktop and not in full screen */
/* Else return FALSE */
}
我们可以在没有浏览器嗅探的情况下做到吗？
正如您所发现的，浏览器兼容性是一个很大的缺点。毕竟，这是非常新的东西。
但是，由于您使用的是 JavaScript，因此与仅使用 CSS 相比，您有更多的选择。
例如：
if( window.innerHeight == screen.height) {
// browser is fullscreen
}
您还可以检查一些稍微宽松的比较：
if( (screen.availHeight || screen.height-30) <= window.innerHeight) {
// browser is almost certainly fullscreen
}
当浏览器改变全屏模式时会触发一个事件。您可以使用它来设置变量值，您可以检查该值以确定浏览器是否全屏。
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
}
这将适用于 IE9+ 和其他现代浏览器
function isFullscreen(){ return 1 >= outerHeight - innerHeight };
使用“1”（而不是零）是因为系统有时可能只保留一个像素高度用于鼠标与某些隐藏或滑动命令栏的交互，在这种情况下全屏检测将失败。
使用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).aspx有一个很好的例子，我在下面引用：
document.addEventListener("fullscreenChange", function () {
if (fullscreenElement != null) {
console.info("Went full screen");
} else {
console.info("Exited full screen");
}
});
阅读 MDN Web 文档，我喜欢这种原生方法。
https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/fullscreenElement
function is_fullscreen(){
return document.fullscreenElement != null;
}
或发烧友
let is_fullscreen = () => !! document.fullscreenElement
当您在浏览器中打开开发人员工具时，此方法也适用。因为全屏应用于特定元素，所以 null 意味着它没有全屏显示。
您甚至可以扩展以检查特定元素，例如：
function is_fullscreen(element=null){
return element != null? document.fullscreenElement == element:document.fullscreenElement != null;
}
如果当前是全屏并且（元素为空或元素是全屏元素），则仅返回true