检测全屏模式
Posted
技术标签:
【中文标题】检测全屏模式【英文标题】：Detect fullscreen mode 【发布时间】：2013-05-21 05:52:46 【问题描述】：现代桌面版 IE 10 始终是全屏的。
W3 上有一个 living specification 用于 :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 */
我们可以在没有浏览器嗅探的情况下做到这一点吗？
【问题讨论】：
IE 不支持:fullscreen, developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen
对于遗留问题，请参阅此副本：***.com/q/1047319/1180785（虽然它没有明确的答案，但它确实有一些技巧和特定于浏览器的测试）
尝试检查窗口高度是否等于屏幕高度，但它可能也不是很可靠？
“遗留”的答案是浏览器直到最近才支持“全屏”模式，而且其中许多仍然不支持。
FWIW，那段 jQuery 代码在最新的 Mozilla Firefox 中也不起作用，其中肯定定义了伪类。
【参考方案1】：
正如您所发现的，浏览器兼容性是一个很大的缺点。毕竟，这是非常新的东西。
但是，由于您使用的是 javascript，因此与仅使用 CSS 相比，您可以有更多的选择。
例如：
if( window.innerHeight == screen.height)
// browser is fullscreen
您还可以检查一些稍微松散的比较：
if( (screen.availHeight || screen.height-30) <= window.innerHeight)
// browser is almost certainly fullscreen
【讨论】：
感谢您的回答。它现在有效。希望浏览器供应商和 jQuery 开发人员能够意识到 :fullscreen 伪类的重要性。 对我来说 screen.height 等于 window.outerHeight，而不是在全屏模式下的 innerHeight。screen.height 和 screen.availHeight 不适用于多台显示器。至少在 IE 10 中，您总是获得主显示器的分辨率（可能不是显示浏览器窗口的显示器），因此与 window.innerHeight 的比较完全没有意义。 window.screenTop == 0 && window.screenY == 0 是 IE 10 的多显示器解决方案，但是这在其他浏览器中不起作用。
好吧，好吧，看来我发现了一个小问题。在 Chrome 中按 F12 并打开控制台，然后按 F11 并进入全屏模式，然后这段代码将无法运行。有什么解决办法吗？
在双显示器设置时会失败，尤其是当笔记本电脑连接到具有不同分辨率的辅助显示器时。【参考方案2】：
当浏览器更改全屏模式时会触发一个事件。您可以使用它来设置一个变量值，您可以检查该值以确定浏览器是否全屏。
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
【讨论】：
这没有正确检测到它是否在 chrome mobile 上全屏显示.. 将其更改为：this.fullScreenMode = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;【参考方案3】：
这将适用于 IE9+ 和其他现代浏览器
function isFullscreen() return 1 >= outerHeight - innerHeight ;
使用“1”（而不是 0）是因为系统有时可能只保留一个像素高度用于鼠标与某些隐藏或滑动命令栏的交互，在这种情况下，全屏检测将失败。
还可以工作任何单独的文档元素随时进入全屏模式。【讨论】：
【参考方案4】：使用fullscreenchange 事件来检测全屏更改事件，或者如果您不想处理供应商前缀，那么您也可以监听resize 事件（窗口调整大小事件也会在进入全屏时触发或exited) 然后检查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");
);
【讨论】：
您可能需要使用webkitfullscreenchange 或mozfullscreenchange。但是，该事件仅在从 Fullscreen API 进入时触发。例如，如果您从 Chrome 的工具栏进入全屏模式，它就不会触发。
在 chrome 上，当您按 F11 时，由于某种原因，它不会触发 fullscreenchange 事件。但是，以编程方式将其设置为全屏。更重要的是，事件本身并没有说明它是进入还是离开全屏。在 ios 设备上，他们似乎也忽略了对 touchmove 事件的阻止，这使用户能够将浏览器拖出全屏只是为了增加头痛。【参考方案5】：
阅读 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;
仅当当前为全屏且（元素为 null 或元素为全屏元素）时才返回 true
【讨论】：
【参考方案6】：它在 IE 8 中工作，我正在为 IE 8 编写一个特定的网页。我不需要检查其他浏览器是否支持。
function isFullScreen()
return window.screenTop == 0 ? true : false;
【讨论】：
也许你可以通过返回return window.screenTop == 0来简化它。
简单且出奇的健壮。检测视口的顶部是否与屏幕的顶部相同。当窗口不在顶部屏幕上时，在多显示器系统上中断。【参考方案7】：
这是最新的答案。与所有前缀完全兼容的浏览器：
function IsFullScreen()
return !!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement)
感谢https://developers.google.com/web/fundamentals/native-hardware/fullscreen/
演示
function IsFullScreen()
console.log(!!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement))
<button onclick="IsFullScreen()">log fullscreen state</button>【讨论】：
无法在带有 chrome 的 fedora 35 上工作（总是返回 false）【参考方案8】：这是另一个适用于 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!');
);
【讨论】：
【参考方案9】：您是否尝试过使用 $(window) 而不是 $(document)。以http://webification.com/tag/detect-fullscreen-jquery为例。
【讨论】：
【参考方案10】：试试这个！适用于最近的浏览器。
if (!window.screenTop && !window.screenY)
alert('Fullscreen mode......');
您也可以使用this jquery 插件。
$(window).bind("fullscreen-on", function(e)
alert("FULLSCREEN MODE");
);
【讨论】：
if (!window.screenTop && !window.screenY) 在某些情况下不起作用（例如，如果浏览器窗口没有边框并且用户将窗口最大化）。 如果浏览器 (Chrome) 连接到顶部则不起作用。【参考方案11】：这是另一个可能适合您的解决方案：
function isFullScreen()
return Math.abs(screen.width - window.innerWidth) < 10;
我更喜欢使用宽度，因为它有助于解决底部的标签和开发者信息。
【讨论】：
【参考方案12】：我想出了一个很好的方法：
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
然后将body默认宽度设置为：
body width: calc(100% - 1px)
【讨论】：
如果用户把他的浏览器缩小了……像一半的窗口呢？【参考方案13】：在 iPhone 上的 Safari 中，如果 <video> 全屏播放，webkitDisplayingFullscreen 属性将返回 true。参考：https://developer.apple.com/documentation/webkitjs/htmlvideoelement/1630493-webkitdisplayingfullscreen
【讨论】：
【参考方案14】：建议的解决方案使用：
return window.innerHeight == screen.height && window.innerWidth == screen.width;
工作正常，但前提是您没有缩放浏览器。
要处理缩放屏幕的情况，请使用以下内容：
let zoom = window.outerWidth / window.innerWidth;
return (window.innerHeight * zoom) == screen.height && (window.innerWidth * zoom) == screen.width;
确定缩放，然后将window.innerHeight 和window.innerWidth 相乘。
【讨论】：
【参考方案15】：由于 CSS 在检测全屏方面是可靠的，您可以使用以下内容：
#detector
position: fixed;
visibily: hidden;
top: 0;
left: 0;
@media all and (display-mode: fullscreen)
#detector
top: 1px;
然后你在 javascript 中设置一个间隔来检查元素的位置。
document.getElementById('detector').getBoundingClientRect().top > 0
如果您正在响应，您可以在变量或状态中保持全屏状态。
【讨论】：
【参考方案16】：您可以订阅窗口对象的 keydown 事件。如果用户按下 F11 或 Ctrl+command+F (macOS)，请致电 event.preventDefault() 以防止浏览器全屏操作。相反，您可以调用requestFullscreen 方法或exitFullscreen 方法来更改全屏模式。这样，如果浏览器处于全屏模式，document.fullscreenElement 将始终有一个值。
如果用户使用浏览器菜单进入全屏模式，此解决方法将失效。
【讨论】：
【参考方案17】：要更新一个 JS 变量：
window.matchMedia('(display-mode: fullscreen)').addEventListener('change', ( matches ) =>
if (matches)
window.isFullScreen=true;
else
window.isFullScreen=false;
);
【讨论】：
【参考方案18】：var isFullScreen = function()
var dom = document.createElement("img");
if ("requestFullscreen" in dom
|| "requestFullScreen" in dom
|| "webkitRequestFullScreen" in dom
|| "mozRequestFullScreen" in dom)
return !0;
return !1;
【讨论】：
这只检测浏览器是否允许全屏 不，它只检测特定浏览器/渲染引擎是否支持全屏 API。以上是关于检测全屏模式的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Swift 中使用 AVPlayerViewController 检测全屏模式？