title: Is the Fullscreen API supported in Android Browser and iOS Chrome?
body: <p>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.</p>
  <p>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.</p>
  <p>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.</p>
  <p>I attempted to use the <a href="https://developers.google.com/web/fundamentals/native-hardware/fullscreen/#fake_it_auto-hide_the_address_bar" rel="nofollow noreferrer">Google Web developer documentation</a> to hide the address bar via a non-vendor specific function, e.g.:</p>
  <pre><code>toggleFullScreen = () =&gt; {
    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 &amp;&amp; !doc.mozFullScreenElement &amp;&amp; !doc.webkitFullscreenElement &amp;&amp; !doc.msFullscreenElement) {
      requestFullScreen.call(docEl);
    }
    else {
      cancelFullScreen.call(doc);
    }
  }
  </code></pre>
  <p>This results in an error thrown at the call <code>requestFullScreen.call(docEl)</code>, where <code>docEl</code> does not exist.</p>
  <p>I also tried the following in <code>componentDidMount()</code>:</p>
  <pre><code>componentDidMount() {
    setTimeout(() =&gt; {
      window.scrollTo(0, 1);
    }, 1000);
  }
  </code></pre>
  <p>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.</p>
  <p>The third approach I tried was to add a <code>meta</code> tag in the application:</p>
  <pre><code>&lt;meta name=&quot;mobile-web-app-capable&quot; content=&quot;yes&quot; /&gt;
  </code></pre>
  <p>This appeared not to do anything.</p>
  <p>As last ditch attempts, I tested <a href="https://sindresorhus.com/screenfull.js/" rel="nofollow noreferrer">https://sindresorhus.com/screenfull.js/</a> on iOS Chrome on my iPhone, but its demo page suggests that the Fullscreen API is not supported. I also tried <a href="https://www.npmjs.com/package/toggle-fullscreen" rel="nofollow noreferrer">https://www.npmjs.com/package/toggle-fullscreen</a> 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 <code>toggleFullScreen</code> method described above.</p>
  <p>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?</p>