Question

I have a web page that is intended to be loaded on a person’s iPhone. When the page is loaded, I want to hide the status and address bar that is at the top. I have seen other sites do this. In an attempt to accomplish this, I have placed the following code in the section of my web page:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" />
<script type="text/javascript">
  function page_Load() {
    setTimeout(function() { window.scrollTo(0, 1); }, 100);
  }
</script>

The “page_Load” function is triggered through the onload event of the page’s body element. Oddly, when the page loads, the status/title bar is hidden, however, not the address bar.

How do I hide both the status/title bar and the address bar when a web page loads?

Thank you!

Answer 1

Figured it out. It turns out my page needed to be “longer”. From a absolute perspective, the sizing was correct, but I need to add a couple of pixels at the bottom. This hid the address bar as desired.

Thank you.