有没有办法可靠地检测浏览器是否以全屏模式运行？我很确定没有任何浏览器API可以查询，但有没有人通过检查和比较DOM暴露的某些高度/宽度测量值来解决这个问题？即使它只适用于某些浏览器，我也有兴趣听到它。
答案 0 :(得分：16)
Chrome 15，Firefox 10和Safari 5.1现在提供API，以编程方式触发全屏模式。以这种方式触发的全屏模式提供了检测全屏变化的事件和用于样式化全屏元素的CSS伪类。
有关详细信息，请参阅this hacks.mozilla.org blog post。
答案 1 :(得分：9)
Opera将全屏视为不同的CSS媒体类型。他们称之为Opera Show，您可以轻松控制它：
@media projection {
/* these rules only apply in full screen mode */
}
结合Opera@USB，我个人发现它非常方便。
答案 2 :(得分：7)
如何确定视口宽度和分辨率宽度之间的距离，同样确定高度。如果是少量像素（特别是高度），可能全屏。
但是，这永远不可靠。
答案 3 :(得分：5)
想到我加上我的砰砰声来拯救任何人敲打他们的头脑。如果您完全控制该过程，那么第一个答案非常好，即您在代码中启动全屏过程。没有人应该通过点击F11来做这件事。
W3C推荐http://www.w3.org/TR/view-mode/的形式出现了一线希望，它可以通过媒体查询检测窗口，浮动（无铬），最大化，最小化和全屏（当然这意味着窗口） .matchMedia和相关的）。
我已经看到在使用-webkit和-moz前缀的实施过程中有迹象表明它还没有出现在制作中。
所以不，没有解决办法，但希望我能帮助那些在撞到同一堵墙之前跑来跑去的人。
PS *： - moz-full-screen也有doo-dah，但很高兴知道。
答案 4 :(得分：4)
Firefox 3+在window对象上提供了一个非标准属性，用于报告浏览器是否处于全屏模式：window.fullScreen。
答案 5 :(得分：3)
对于iOS上的Safari，可以使用：
if (window.navigator.standalone) {
alert("Full Screen");
}
答案 6 :(得分：3)
至少在Chrome中：
onkeydown可用于检测被按下以进入全屏的F11键。
onkeyup可用于检测被按下以退出全屏的F11键。
与检查keyCode == 122
棘手的部分是告诉keydown / keyup不要执行其代码，如果另一个刚刚执行。
答案 7 :(得分：2)
右。完全迟到了......
截至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
答案 8 :(得分：2)
这适用于所有新浏览器：
if (!window.screenTop && !window.screenY) {
alert('Browser is in fullscreen');
}
答案 9 :(得分：2)
您可以检查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");
}
});
答案 10 :(得分：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 - 传递
赢7 ：
Firefox 27，Chrome 33，Opera 12，Opera 20，IE 10 - 通过
IE＆lt; 10 - 失败
答案 11 :(得分：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);
答案 12 :(得分：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;
答案 13 :(得分：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());
}
答案 14 :(得分：0)
“文档”只读属性返回当前在此文档中以全屏模式显示的Element，如果当前未使用全屏模式，则返回null。
if(document.fullscreenElement){
console.log("Fullscreen");
}else{
console.log("Not Fullscreen");
};
在所有主流浏览器中都支持。
答案 15 :(得分：0)
在搜索上限和下限时，我只找到一半的解决方案。 因此，最好在这里发布一种现代且可行的方法来解决此问题：
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)
资源：
答案 16 :(得分：0)
要检测浏览器是否处于全屏模式：
document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement
根据caniuse，您应该适合大多数浏览器。
答案 17 :(得分：0)
2021 年，Fullscreen 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()
}
}