检测浏览器是否处于全屏模式
有什么方法可靠地检测浏览器是否在全屏模式下运行？ 我很确定没有任何浏览器API可以查询，但是有没有人通过检查和比较由DOM公开的某些高度/宽度度量来实现它？ 即使它只适用于某些浏览器，我也有兴趣听到它。
Chrome 15，Firefox 10和Safari 5.1现在提供API以编程方式触发全屏模式。 以这种方式触发的全屏模式提供事件来检测全屏变化和用于样式化全屏元素的CSS伪类。
有关详细信息，请参阅hacks.mozilla.org博客文章 。
Opera将全屏视为不同的CSS媒体types。 他们称之为Opera Show ，你可以很容易地控制它：
@media projection { /* these rules only apply in full screen mode */ } 结合Opera @ USB ，我个人发现它非常方便。
如何确定视口宽度和分辨率宽度之间的距离，同样是高度。 如果是less量像素（尤其是高度），则可能是全屏显示。
但是，这永远不可靠。
只是以为我会加我的呕吐去拯救任何一个人的头脑。 第一个答案是非常好的，如果你有完整的控制过程，那就是你用代码启动全屏过程。 任何人都应该用F11来实现这个function。
希望的一线希望来自于这个W3C的build议http://www.w3.org/TR/view-mode/ ，它将启用检测窗口，浮动（无铬），最大化，最小化和全屏媒体查询（这当然意味着window.matchMedia和相关）。
我已经看到它在执行过程中带有-webkit和-moz前缀的迹象，但它似乎还没有在生产中。
所以没有，没有解决办法，但希望我能拯救一个人跑了很多，然后撞到同一堵墙。
PS *： – moz-full-screen也是doo-dah，但是很高兴知道。
Firefox 3 +在window对象上提供非标准属性，报告浏览器是否处于全屏模式： window.fullScreen 。
对于iOS上的Safari，可以使用：
if (window.navigator.standalone) { alert("Full Screen"); }
更多： http : //developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
在Chrome中至less：
onkeydown可以用来检测被按下进入全屏的F11键。 onkeyup可以用来检测按下F11键退出全屏。
与检查keyCode == 122一起使用
棘手的部分是告诉keydown / keyup不要执行它的代码，如果另一个刚刚做。
这适用于所有新的浏览器：
if (!window.screenTop && !window.screenY) { alert('Browser is in fullscreen'); }
对。 完全迟到这个…
截至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
您可以检查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"); } });
有我的非跨浏览器的变种：
<!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>
testing：
Kubuntu 13.10 ：
Firefox 27（ <!DOCTYPE html>是必需的，脚本可以正常工作在双显示器上），Chrome 33，Rekonq – pass
赢7 ：
Firefox 27，Chrome 33，Opera 12，Opera 20，IE 10 – 通行证
IE <10 – 失败
我的解决scheme是：
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);
这是我来的解决scheme…我把它写成一个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;
用户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()); }
