The code below works fine in Internet Explorer, but in Chrome it only works if you are in debug mode, what's wrong?
window.onresize = function (e) {
if (window.outerWidth === screen.width && window.outerHeight == screen.height) {
if (!fullscreen) {
fullscreen = true;
onfullscreenchange(true);
}
} else {
if (fullscreen) {
fullscreen = false;
onfullscreenchange(false);
}
}
};
function onfullscreenchange(full) {
alert(full);
}
Here is an example for listening for if the window has been fullscreened with F11. This code listens not just for resize
events but also for F11 since the resize
event isn't fired in Chrome when entering fullscreen mode.
// Function to check if the window is fullscreened or not
var isFullscreen = function(){
return (window.outerWidth === screen.width && window.outerHeight === screen.height);
};
// Function to run when window size has changed
var screenSizeChange = function(){
if (isFullscreen()) {
document.querySelector('body').innerHTML = 'You are in fullscreen mode';
} else {
document.querySelector('body').innerHTML = 'You are in windowed mode';
}
};
// Run screenSizeChange when `resize` event is triggered
window.addEventListener('resize', screenSizeChange, false);
// Run screenSizeChange when F11 is pressed
window.addEventListener('keyup', function(e){
if (e.keyCode === 122) { // Listen for F11
screenSizeChange();
}
}, false);
Live version to try: http://jsbin.com/ciqeb/4/edit?js,output