Detect fullscreen mode with JavaScript
Question:
How to detect fullscreen mode with JavaScript? Answer:
window.addEventListener('resize', (evt) => {
if (window.innerHeight == screen.height) {
console.log('FULL SCREEN');
} else {
console.log('NORMAL SCREEN');
}
});
Description:
Even if there is a fullscreen API in all modern desktop browsers to handle fullscreen mode, unfortunately, it is not always giving correct results. If the user uses the keyboard shortcut F11
then the fullscreenchange
event is not triggered.
However, the resize event is triggered in both cases. So detecting full screen mode with window and screen sizes gives a better result.
If you only care with the cases triggered by your code then you can use the following code:
document.addEventListener('fullscreenchange', ()=>{
if (document.fullscreenElement) {
console.log('Fullscreen');
} else {
console.log('Normal');
}
});
Reference:
innerWidth reference
Share "How to detect fullscreen mode with JavaScript?"
Related snippets:
Tags:
fullscreen, detect, fullscreenchange, window, screen Technical term:
Detect fullscreen mode with JavaScript