有什么方法可以可靠地检测浏览器是否以全屏模式运行？我很确定没有任何浏览器 API 可以查询，但是有没有人通过检查和比较 DOM 暴露的某些高度/宽度测量值来解决这个问题？即使它仅适用于某些浏览器，我也有兴趣了解它。
问问题
26120 次
18 回答
16
Chrome 15、Firefox 10 和 Safari 5.1 现在提供 API 以编程方式触发全屏模式。以这种方式触发的全屏模式提供了检测全屏更改的事件和用于设置全屏元素样式的 CSS 伪类。
有关详细信息，请参阅此 hacks.mozilla.org 博客文章。
于 2012-02-02T12:52:23.727 回答
8
What about determining the distance between the viewport width and the resolution width and likewise for height. If it is a small amount of pixels (especially for height) it may be at fullscreen.
However, this will never be reliable.
于 2009-06-26T04:28:01.433 回答
8
Opera treats full screen as a different CSS media type. They call it Opera Show, and you can control it yourself easily:
@media projection {
/* these rules only apply in full screen mode */
}
Combined with Opera@USB, I've personally found it extremely handy.
于 2009-06-26T04:46:45.707 回答
6
您可以检查 if document.fullscreenElementis not null 以确定全屏模式是否打开。您需要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");
}
});
于 2016-02-03T13:30:58.803 回答
5
只是想我会添加我的 thruppence 来拯救任何撞到头的人。如果您可以完全控制该过程，即您在代码中启动全屏过程，则第一个答案非常好。任何人都应该通过按 F11 来做到这一点。
地平线上的一线希望以 W3C 推荐http://www.w3.org/TR/view-mode/的形式出现，它将通过以下方式检测窗口化、浮动（无 chrome）、最大化、最小化和全屏媒体查询（当然意味着 window.matchMedia 和关联）。
我已经看到迹象表明它正在使用 -webkit 和 -moz 前缀的实施过程中，但它似乎还没有投入生产。
所以不，没有解决方案，但希望我能在撞到同一堵墙之前拯救一些人。
PS *:-moz-full-screen 也可以做 doo-dah，但很高兴知道。
于 2015-01-28T03:35:27.127 回答
5
windowFirefox 3+ 在报告浏览器是否处于全屏模式的对象上提供了一个非标准属性： window.fullScreen.
于 2012-02-02T13:35:54.517 回答
4
Document 只读属性返回当前在此文档中以全屏模式呈现的元素，如果当前未使用全屏模式，则返回 null。
if(document.fullscreenElement){
console.log("Fullscreen");
}else{
console.log("Not Fullscreen");
};
支持所有主流浏览器。
于 2019-07-01T13:03:06.547 回答
4
在搜索高价和低价时，我只找到了一半的解决方案。所以最好在这里发布一个现代的、有效的方法来解决这个问题：
var isAtMaxWidth = (screen.availWidth - window.innerWidth) === 0;
var isAtMaxHeight = (screen.availHeight - window.outerHeight <= 1);
if (!isAtMaxWidth || !isAtMaxHeight) {
alert("Browser NOT maximized!");
}
截至 2019 年 11 月 10 日，已在 Chrome、Firefox、Edge 和 Opera*（*侧边栏未固定）中测试并正常工作。测试环境（仅限桌面）：
CHROME - Ver. 78.0.3904.97 (64-bit)
FIREFOX - Ver. 70.0.1 (64-bit)
EDGE - Ver. 44.18362.449.0 (64-bit)
OPERA - Ver. 64.0.3417.92 (64-bit)
OS - WIN10 build 18362.449 (64-bit)
资源：
于 2019-11-10T21:36:23.353 回答
3
对于 iOS 上的 Safari，可以使用：
if (window.navigator.standalone) {
alert("Full Screen");
}
于 2012-03-20T17:13:33.183 回答
3
In Chrome at least:
onkeydown can be used to detect the F11 key being pressed to enter fullscreen.
onkeyup can be used to detect the F11 key being pressed to exit fullscreen.
Use that in conjunction with checking for keyCode == 122
The tricky part would be to tell the keydown/keyup not to execute its code if the other one just did.
于 2012-08-21T07:14:50.900 回答
3
正确的。这个完全迟到了……
截至 2014 年 11 月 25 日（撰写本文时），元素可以请求全屏访问，然后控制进入/退出全屏模式。
MDN 说明：https ://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
David Walsh 的直截了当的解释：http: //davidwalsh.name/fullscreen
于 2014-11-25T12:42:09.940 回答
1
有我的 NOT 跨浏览器变体：
<!DOCTYPE html>
<html>
<head>
<title>Fullscreen</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
var fullscreen = $(window).height() + 1 >= screen.height;
$(window).on('resize', function() {
if (!fullscreen) {
setTimeout(function(heightStamp) {
if (!fullscreen && $(window).height() === heightStamp && heightStamp + 1 >= screen.height) {
fullscreen = true;
$('body').prepend( "<div>" + $( window ).height() + " | " + screen.height + " | fullscreen ON</div>" );
}
}, 500, $(window).height());
} else {
setTimeout(function(heightStamp) {
if (fullscreen && $(window).height() === heightStamp && heightStamp + 1 < screen.height) {
fullscreen = false;
$('body').prepend( "<div>" + $( window ).height() + " | " + screen.height + " | fullscreen OFF</div>" );
}
}, 500, $(window).height());
}
});
</script>
</body>
</html>
测试于：
Kubuntu 13.10：
Firefox 27（<!DOCTYPE html>必需，脚本可在双显示器上正常工作）、Chrome 33、Rekonq - 通过
Win 7：
Firefox 27、Chrome 33、Opera 12、Opera 20、IE 10 - 通过
IE < 10 - 失败
于 2014-03-07T15:47:28.630 回答
1
这适用于所有新浏览器：
if (!window.screenTop && !window.screenY) {
alert('Browser is in fullscreen');
}
于 2011-10-21T22:20:47.873 回答
1
我的解决方案是：
var fullscreenCount = 0;
var changeHandler = function() {
fullscreenCount ++;
if(fullscreenCount % 2 === 0)
{
console.log('fullscreen exit');
}
else
{
console.log('fullscreened');
}
}
document.addEventListener("fullscreenchange", changeHandler, false);
document.addEventListener("webkitfullscreenchange", changeHandler, false);
document.addEventListener("mozfullscreenchange", changeHandler, false);
document.addEventListener("MSFullscreenChanges", changeHandler, false);
于 2015-06-24T15:19:00.950 回答
1
这是我找到的解决方案......我将它编写为 es6 模块，但代码应该非常简单。
/**
* Created by sam on 9/9/16.
*/
import $ from "jquery"
function isFullScreenWebkit(){
return $("*:-webkit-full-screen").length > 0;
}
function isFullScreenMozilla(){
return $("*:-moz-full-screen").length > 0;
}
function isFullScreenMicrosoft(){
return $("*:-ms-fullscreen").length > 0;
}
function isFullScreen(){
// Fastist way
var result =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement;
if(result) return true;
// A fallback
try{
return isFullScreenMicrosoft();
}catch(ex){}
try{
return isFullScreenMozilla();
}catch(ex){}
try{
return isFullScreenWebkit();
}catch(ex){}
console.log("This browser is not supported, sorry!");
return false;
}
window.isFullScreen = isFullScreen;
export default isFullScreen;
于 2016-09-10T18:07:16.033 回答
1
2021 年，全屏 API可用。这是一种生活标准，所有浏览器都支持（除了常见的嫌疑人——IE11 和 iOS Safari）。
// toggle fullscreen
if (!document.fullscreenElement) {
// enter fullscreen
if (docElm.requestFullscreen) {
console.log('entering fullscreen')
docElm.requestFullscreen()
}
} else {
// exit fullscreen
if (document.exitFullscreen) {
console.log('exiting fullscreen')
document.exitFullscreen()
}
}
于 2021-02-20T22:34:14.107 回答
0
用户window.innerHeight和screen.availHeight. 还有宽度。
window.onresize = function(event) {
if (window.outerWidth === screen.availWidth && window.outerHeight === screen.availHeight) {
console.log("This is your MOMENT of fullscreen: " + Date());
}
于 2015-12-03T15:13:33.917 回答
0
检测浏览器是否处于全屏模式：
document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement
根据caniuse的说法，您应该适合大多数浏览器。
于 2020-06-09T13:45:56.287 回答