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 ponentDidMount():

ponentDidMount() {
  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 .js/ on iOS Chrome on my iPhone, but its demo page suggests that the Fullscreen API is not supported. I also tried 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?

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 ponentDidMount():

ponentDidMount() {
  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./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./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?

• javascript
• android
• css
• ios
• google-chrome

• Did they work on other devices? – shreyasm-dev Commented Jun 24, 2020 at 18:40
• Other than the device simulator built into desktop Chrome, I have an iOS device to test on. – Alex Reynolds Commented Jun 24, 2020 at 18:44
• Are you trying to use it on page load? It also might be a browser-specific problem. Try using MDN and Caniuse. to see if the Fullscreen API is supported. – shreyasm-dev Commented Jun 24, 2020 at 18:47
• I am trying to use this method when the React ponent/application is mounted, with adjustments to the timeout to allow the DOM to be rendered. – Alex Reynolds Commented Jun 24, 2020 at 18:50
• Caniuse. says that the Fullscreen API is supported, but vendor-agnostic calls to that API yield errors. I'm not sure which source to trust, except that it doesn't appear to work in reality. – Alex Reynolds Commented Jun 24, 2020 at 18:52

4 Answers 4

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/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.

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.

• Google PWA help (codelabs, docs, etc)
• React PWA Documentation
• Angular official PWA guide
• Vue CLI PWA Plugin

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.

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();
    }
  }
}