检测浏览器是不是处于全屏模式
Posted
技术标签:
【中文标题】检测浏览器是不是处于全屏模式【英文标题】：Detecting if a browser is in full screen mode检测浏览器是否处于全屏模式 【发布时间】：2010-11-06 01:08:55 【问题描述】：有什么方法可以可靠地检测浏览器是否以全屏模式运行？我很确定没有任何浏览器 API 可以查询，但是有没有人通过检查和比较 DOM 公开的某些高度/宽度测量值来解决这个问题？即使它只适用于我有兴趣了解它的某些浏览器。
【问题讨论】：
为什么需要检测这个？也许您的问题还有其他解决方案？ 当浏览器处于全屏模式时，无法看到操作系统报告的时间（例如，在 Windows 任务栏通知区域的时钟中）。能够看到当前时间对于我们的 Web 应用程序的用户来说可能很重要，因此我们希望能够在浏览器全屏时显示时钟。当我们的应用程序以 1024*768 等较低分辨率运行时，屏幕空间非常宝贵，因此我们希望尽可能仅在浏览器全屏时显示时钟。 如果他们的桌面上通常没有时钟，也不全屏使用浏览器怎么办？你确定你是负责他们知道当前时间的人吗？ 我们希望这样做是基于客户的反馈。 我不明白这里动机的三度质疑。 Web 应用程序（例如）在 F11 模式下的外观/行为可能与在常规 chrome 中不同的原因有很多。专注于提供解决方案，而不是质疑意图。 【参考方案1】：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()
【讨论】：
【参考方案2】：检测浏览器是否处于全屏模式：
document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement
根据caniuse，大多数浏览器应该没问题。
【讨论】：
【参考方案3】：在搜索高价和低价时，我只找到了一半的解决方案。 所以最好在这里发布一个现代的、可行的方法来解决这个问题：
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)
资源：
https://developer.mozilla.org/en-US/docs/Web/API/Screen/availWidth https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth https://developer.mozilla.org/en-US/docs/Web/API/Screen/availHeight https://developer.mozilla.org/en-US/docs/Web/API/Window/outerHeight【讨论】：
【参考方案4】：Document 只读属性返回当前在此文档中以全屏模式呈现的元素，如果当前未使用全屏模式，则返回 null。
if(document.fullscreenElement)
console.log("Fullscreen");
else
console.log("Not Fullscreen");
;
支持所有主流浏览器。
【讨论】：
【参考方案5】：对于 iOS 上的 Safari 可以使用：
if (window.navigator.standalone)
alert("Full Screen");
更多： https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
【讨论】：
【参考方案6】：Chrome 15、Firefox 10 和 Safari 5.1 现在提供 API 以编程方式触发全屏模式。以这种方式触发的全屏模式提供了检测全屏更改的事件和用于设置全屏元素样式的 CSS 伪类。
详情请见this hacks.mozilla.org blog post。
【讨论】：
不过，有没有办法使用浏览器提供的方法（如 F11 或 Zoom in Chrome 旁边的菜单）检测用户进入全屏模式？ developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/…【参考方案7】：这是我找到的解决方案... 我将其编写为 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;
【讨论】：
【参考方案8】：您可以检查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");
);
【讨论】：
【参考方案9】：用户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());
【讨论】：
【参考方案10】：我的解决办法是：
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);
【讨论】：
这是一个很酷的解决方案，但是当我按下f11 时它似乎不支持:) 也许您可以通过添加keypress === "f11" 事件或其他什么来改进它？ :)【参考方案11】：
只是想我会添加我的 thruppence 来拯救任何撞到头的人。如果您可以完全控制流程，即您在代码中启动全屏流程，那么第一个答案非常好。任何人都应该按 F11 来做到这一点。
希望的曙光以 W3C 推荐 http://www.w3.org/TR/view-mode/ 的形式出现，它将通过媒体查询（当然意味着 window.matchMedia和相关的）。
我已经看到迹象表明它正在使用 -webkit 和 -moz 前缀的实施过程中，但它似乎还没有投入生产。
所以不，没有解决方案，但希望我能避免有人在撞到同一堵墙之前经常跑来跑去。
PS *:-moz-full-screen 也可以做 doo-dah，但很高兴知道。
【讨论】：
链接的建议已于 2018 年 10 月过时，很遗憾不会实施。【参考方案12】：没错。这个完全迟到了......
截至 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
【讨论】：
【参考方案13】：有我的 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
【讨论】：
【参考方案14】：至少在 Chrome 中：
onkeydown 可用于检测 F11 键被按下进入全屏。
onkeyup 可用于检测 F11 键被按下以退出全屏。
将其与检查keyCode == 122结合使用
棘手的部分是告诉 keydown/keyup 如果另一个刚刚执行，则不要执行其代码。
【讨论】：
如果用户在导航到运行该 javascript 的网页之前使用 F11 进入全屏模式，这将无济于事。【参考方案15】：Firefox 3+ 在 window 对象上提供了一个非标准属性，用于报告浏览器是否处于全屏模式：window.fullScreen。
【讨论】：
不错！这确实在 Firefox 中可靠地工作。这绝对是解决方案的一部分。【参考方案16】：这适用于所有新浏览器：
if (!window.screenTop && !window.screenY)
alert('Browser is in fullscreen');
【讨论】：
很遗憾，这个测试变得不可靠了。 这似乎有效： if (screen.height === window.outerHeight) alert('Browser is in fullscreen'); 不，第二种解决方案在 Chrome 23 中不起作用，当通过 API 启用全屏时，但用户使用 Ctrl+alt+F 将其关闭。 @TomUlatowski - 当它变得不可靠时你能更具体吗？ 如果用户没有窗口边框并且浏览器最大化，这将不起作用。【参考方案17】：Opera 将全屏视为不同的 CSS 媒体类型。他们称它为Opera Show，您可以轻松控制它：
@media projection
/* these rules only apply in full screen mode */
结合Opera@USB，我个人觉得非常好用。
【讨论】：
请为您的答案添加一些进一步的解释 - 这与 Javascript 有什么关系？【参考方案18】：如何确定视口宽度和分辨率宽度之间的距离以及高度。如果它是少量像素（尤其是高度），它可能处于全屏状态。
但是，这永远不会可靠。
【讨论】：
如果浏览器实际上是全屏运行，视口大小和分辨率之间的差异应该等于 0。除非你运行多个显示器，否则我猜。 滚动条算作视口的一部分吗？ 我不确定 - 你必须尝试一下。 这是我一直在思考的路线。我可以编写一个测试页面，显示所有感兴趣的尺寸，并比较正常显示和全屏时为页面报告的尺寸。从那里我可能能够确定某些浏览器的状态。 刚刚用 Chrome 测试过。window.innerWidth、document.body.clientWidth、document.width 和 document.documentElement.clientWidth 都报告相同的值...以上是关于检测浏览器是不是处于全屏模式的主要内容，如果未能解决你的问题，请参考以下文章