Is the Fullscreen API supported in Android Browser and iOS Chrome?

Published

I have a full-page React application. By this, I mean that the width and height of the application take up the width and height of the browser viewport.

I would like to hide the address bar in Android Browser or iOS Chrome. This is very valuable space for a full-page data visualization application. In landscape orientation on an iPhone XS, for instance, the address bar takes up approximately 14% of the screen’s vertical space.

That’s a lot of real estate for a piece of UI that is not immediately useful, which I’d like to hide away, where I can.

I attempted to use the Google Web developer documentation to hide the address bar via a non-vendor specific function, e.g.:

toggleFullScreen = () => {
  var doc = window.document;
  var docEl = doc.documentElement;

  var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
  var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;

  if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
    requestFullScreen.call(docEl);
  }
  else {
    cancelFullScreen.call(doc);
  }
}

This results in an error thrown at the call requestFullScreen.call(docEl), where docEl does not exist.

I also tried the following in componentDidMount():

componentDidMount() {
  setTimeout(() => {
    window.scrollTo(0, 1);
  }, 1000);
}

This second approach did not work, perhaps because of the viewport dimensions of my application. It does not yield any errors. However, increasing the height in the application CSS did not work, either.

The third approach I tried was to add a meta tag in the application:

<meta name="mobile-web-app-capable" content="yes" />

This appeared not to do anything.

As last ditch attempts, I tested https://sindresorhus.com/screenfull.js/ on iOS Chrome on my iPhone, but its demo page suggests that the Fullscreen API is not supported. I also tried https://www.npmjs.com/package/toggle-fullscreen and similar NPM-sourced packages to access the Fullscreen API. None of them seemed to work and most seemed to issue errors similar to those I ran into with the toggleFullScreen method described above.

Is there a correct, working method to hide the address bar via a pure JavaScript call, which requires no user interaction, or is the Fullscreen API simply not supported on Android Browser / iOS Chrome browsers?

Source: Ios

Published
Categorised as android, css, google-chrome, ios, javascript

Answers

The answer to your question ‘Is there a correct, working method to hide the address bar via a pure JavaScript call, which requires no user interaction’ is, acccording to the MDN webdocs (see https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen), no. It states explicitly that it will fail when it is not called from a ui interaction or a device orientation change.

If one of the browsers that you mention does succeed in going fullscreen (by using requestFullScreen)in another situation, it is an implementation error and should not be relied on to persist in future versions.


Prof. Cristian Cremin

Leave a Reply

Your email address will not be published. Required fields are marked *

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq