Question

157

How to detect browser has gone to full screen

rated 0 times [ 158] [ 1] / answers: 1 / hits: 18275 / 9 Years ago, tue, december 22, 2015, 12:00:00

TLDR;

I can detect if the browser has gone to full screen through the full screen API but I cannot detect that the browser has gone to full screen through f11 or the browser menu (specifically chrome).

Original:

Currently I am using screenfull to go to full screen and detect that the browser is in full screen. The problem is that I do not want to display my full screen toggle button when the browser has gone to full screen through a browser function (i.e. f11 or full screen through the browser menus). This is because the javascript full screen API does not seem to be able to detect that you are in full screen or get you out of full screen when you have gone there through a browser function. I could just detect if f11 was hit, but this doesn't work on mac or when full screen has been initiated through the browser menus.

Any ideas on how to detect if full screen was initiated through a browser function? I'm only targeting webgl compatible browsers so that cuts down on a lot of gotchas.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cruzs

Add To Favorites

Follow

Total Points: 710

Total Questions: 113

Total Answers: 100

Location: Nepal

Member since Sat, Jul 18, 2020

4 Years ago

cruzs questions

1 How do I use JavaScript fetch in Laravel 8?

Thu, Nov 26, 20, 00:00, 4 Years ago

1 Print PDF from BLOB

Wed, Oct 28, 20, 00:00, 4 Years ago

1 Best practice for Next.js data fetching inside a component

Wed, Aug 19, 20, 00:00, 4 Years ago

1 Not getting form data in req.body Express/node.js

Sun, Aug 2, 20, 00:00, 4 Years ago

1 React Router history.goBack doesn't work when using < Redirect />

Sun, Jul 12, 20, 00:00, 4 Years ago

View All

answered 9 Years ago milo · Accepted Answer

I haven't tested this for reliability but this is my take.

  //without jQuery

window.addEventListener('resize', function(){

  if(screen.width === window.innerWidth){

   // this is full screen

  }

});





  //with jQuery

$(document).ready(function() {

  $(window).on('resize', function(){

    if(screen.width === window.innerWidth){

      // this is full screen

    }

  });

});

This seems to work when pressing the F11 button and other methods, so it should catch the edge cases that the full screen api does not. Although I'm not sure the comparison of screen.width vs. window.innerWidth is a reliable way to check for full screen. Maybe someone else can add to/critique this.