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

user_19410 0
Viewed 3805

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?

google-chrome android css javascript ios
4 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.

user_11280790

Fullscreen is a feature the user must request.

This is an intentional choice from the Chrome team and any browser vendor that supports the Fullscreen API. So trying to call that onLoad isn't going to work. You might be able to find some React libraries to make your life easier but you'll need to add a button at the very least.

If you're going to add a "fullscreen" button, you might want to consider going a step further... and make the app "installable".

Other option: PWA

Why not create a Progressive Web App? If you're expecting to have a full-screen implementation that seems to be exactly the experience PWAs were created to address.

Additionally, with a PWA you get an app like icon on the screen, background updates, push notifications, and much more. Here's the Google Developer's overview. PWAs work in Chrome, FF, IE, Edge, and mostly in Safari (90% or so as of this writing).

To create a PWA you'll need to define a web manifest file. This allows you to set icons, modify the presentation, and so on.

PWAs with JS Frameworks

There are helper libraries for all the major JS frameworks to make it easier to build a PWA. Since you're using React this is the best overview I've seen.

That said, you really only need a manifest file and to register a service worker to get started.

user_62689140

I recently developed a simple tool to show Italy covid-19 data charts; you can test it following this link than pressing surface link. You can view the repository to check it by yourself. Anyway the core is here.

A short briefing: to open full screen (where root is the default id for root DIV in React.js)

document.getElementById("root").requestFullscreen({ navigationUI: "hide" });

to close full screen:

if(document.fullscreenElement) document.exitFullscreen();

I tested this both on IOS and Android.

Hope this helps.

user_46909460 
function toggleFullscreen() {
  let elem = document.querySelector("div");// or other elements ...
  if (elem != null){
    if (!document.fullscreenElement) {
      elem.requestFullscreen().catch(err => {
        alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
      });
    } else {
      document.exitFullscreen();
    }
  }
}
user_18667720
Related