Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to detect if user has enabled full screen in browser

Is there some JavaScript event fired when user enables full screen in Chrome or FireFox?

I have WebGL application with canvas width and height set to a certain size and I would like to resize that among other things when user enables full screen. If there isn't such event, should I start researching ways to fill the browser window with canvas all though it complicates things while debugging?

like image 621
Zharktas Avatar asked Apr 11 '11 07:04

Zharktas


People also ask

How do I know if my browser is in full screen?

Simple enough: Find the browser viewport using $(window). width() and $(window). height() , and if they conform to a set of defined viewport sizes (600 x 480, 1280 x 800, etc.), then you can know that it is most likely fullscreen.

Which option gives the user a full screen view?

A very common shortcut, particularly for browsers, is the F11 key. It can take your screen into and out of full-screen mode quickly and easily.

How do I stop browser from opening in full screen mode?

1. Press the "F11" key on your keyboard if the browser starts up in full screen mode.

How do I force my browser to full screen?

Full-screen can be activated for the whole browser window by pressing the F11 key. It can be exited by pressing the Esc button.


2 Answers

You can compare the sreen width to the browser width, or height.

if (screen.width == window.innerWidth && screen.height == window.innerHeight) {
    //full web browser
}

EDIT : Be carefull in chrome if user have download manager, translate bar or element inspercter open the height is different to the sreen.

like image 120
Yoann Avatar answered Oct 14 '22 08:10

Yoann


You can use document.mozFullScreen and document.webkitIsFullScreen as below:

if ((!document.mozFullScreen && !document.webkitIsFullScreen)) {
   //FullScreen is disabled
} else {
   //FullScreen is enabled
}
like image 6
PBN Avatar answered Oct 14 '22 09:10

PBN