Detect fullscreen mode on mobile

Question

I had lost much time to search for detecting fullscreen mode on mobile.
But the result I find out is only for browser desktop. Here Detect fullscreen mode

Is there any way to detect fullscreen mode on mobile ?

Answer 1

Check the document.fullscreenElement property.

https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/fullscreenElement

This example presents a function, isVideoInFullscreen(), which looks at the value returned by fullscreenElement; if the document is in full-screen mode (fullscreenElement isn't null) and the full-screen element's nodeName is VIDEO, indicating a element, the function returns true, indicating that the video is in full-screen mode.

function isVideoInFullscreen() {
  if (document.fullscreenElement && document.fullscreenElement.nodeName == 'VIDEO') {
    return true;
  }
  return false;
}