Browser F11 Fullscreen Does Not Register with -webkit-full-screen or Javascript API
css, html, javascript
Solution
Worth a look
(function() {
var checktimer;
function isFullScreen() {
return (window.fullScreen) || (window.innerWidth == screen.width && window.innerHeight == screen.height);
}
$(window).on('resize', function() {
if(typeof checktimer!="undefined") { clearTimeout(checktimer); }
checktimer = setTimeout(function() { alert(isFullScreen()); },2000);
});
})();
Notice that the call to the isFullScreen() function is timed, this is because some browsers will animate the fullscreen action , causing a resize event to fire until the animate stops.
Tried on Firefox and Chrome - ff uses the `window.fullScreen` here, I have not looked at the others, but easy enough to add those in the check of the return.
Problem
I am using javascript(for example, `requestFullscreen`) and css(`:-webkit-full-screen`) API's to detect the browser's state in full screen or not. I don't have a issue with these API's, as they work successfully. The issue I am having is that if the user hits F11, it does not register in the browser's environment and the javascript api and CSS api's for fullscreen detection do not detect fullscreen. Is there any way to work around this? I have some animations that depend on the size of the screen(in regards to fullscreen) and I have come to a dead end.