CODEWITHSUNDEEP
javascriptiphone
Villager
Villager

Reputation: 6689

iPhone - Hide Address Bar on Page Load

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!

Upvotes: 15

Views: 25474

Answers (4)

musicformellons
musicformellons

Reputation: 13383

This page explains more up-to-date status of 'fullscreen'.

Upvotes: 0

Gabriel Nahmias
Gabriel Nahmias

Reputation: 978

A quick and dirty jQuery method...

$(function() {
    function orientationChange(e) {
        $("body").scrollTop(1);
    }
    $("body").css({ height: "+=300" }).scrollTop(1);
    $(window).bind("orientationchange", orientationChange);
});

This also hides the bar when a person changes their orientation (because it does become visible again normally). Just add this somewhere on your page and it'll automatically (regardless of 100% height/width/whatever) do what you seek. I have not measured the exact height of the address bar but it appears to be around 70px. I put 300 there just to ensure it works.

Upvotes: 0

rakaloof
rakaloof

Reputation: 606

For those of you using jQuery here's an even simpler version:

$('body').scrollTop(1);

Upvotes: 10

Villager
Villager

Reputation: 6689

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.

Upvotes: 4

Related Questions