I believe for beginners who are stepping into mobile web development, creating a full screen mobile web app and hiding the address or the URL bar of the mobile browser can be a little irritating and kind of mystified at times. In this tutorial I will discuss how to build a full screen mobile web app using pure javascript, html/html5 and css/css3. I will not be using Sencha Touch or any other mobile web frameworks here. Before reading through, check out the demo app in an iPod or an iPhone and notice how the URL bar gets hidden to reveal more of the viewport.

1. Writing a full screen mobile web app for iPhone
This is one particular post that I was trying to pen down for some time now. I believe for beginners who
are stepping into mobile web development, creating a full screen mobile web app and hiding
the address or the URL bar of the mobile browser can be a little irritating and kind of mystified at times.
In this tutorial I will discuss how to build a full screen mobile web app using pure javascript, html/html5
and css/css3. I will not be using Sencha Touch or any other mobile web frameworks here. Before reading
through, check out the demo app in an iPod or an iPhone and notice how the URL bar gets hidden to
reveal more of the viewport.
The Viewport
The main idea behind a full screen mobile web app is to hide the Address/URL bar so that the app looks
like a native app and occupies the most of the space available within the browser window. Note that we
are talking about a mobile web app and your app will run in the browser of your touch device.
Now, what is a viewport? Seems like a word that you might have heard before. Well, the actual visible
area to the user that is available for the app is the viewport. Below is an image of my iPod’s mobile safari
browser window in portrait mode. I have pointed out the labels and the sizes of each of the components.
The dimensions are same for the iPhone as well. In portrait mode the resolution is 320 x 480 pixels. You
can see from the image that in portrait mode the viewport is only 356px in height. The Status bar and
the Button bar cannot be hidden from the user and will always be displayed. So, at the best we can hide
the URL bar from the user to make the app look like a full screen app and give it a native feel.

2. Check out the second image below where the URL bar is hidden and the app is a full screen one. You can
see the header and footer of the web page. I have set the HTML wrapper height such that it fits the
window of the browser. Let’s talk on how to do that.

3. Hiding the URL bar
Whenever I am writing a mobile web app I usually place all my visual elements inside a wrapper element.
This way I can set a minimum height to my wrapper so that the app loads as a full screen. You will find out
why,
<div id="wrapper">
<div id="header">Header</div>
<div id="mainContent">
<p>Eagles are members of the bird family Accipitridae,
and belong to several genera which are not necessarily
closely related to each other. Most of the more than
61 species occur in Eurasia and Africa. Outside this
area, just two species (the Bald and Golden Eagles) can
be found in the United States and Canada, nine more
in Central and South America, and three in Australia.
Many different species of eagle are found in the Philippines.</p>
<img src="images/bird.jpg" width="100%" />
</div>
<div id="footer">Footer</div>
</div>
Now, we need to scroll our viewport up to hide the 60 pixels URL bar. The viewport as in image1 above is
only 356px in height with the URL bar showing. If we scroll up by 60px then we need to add a 60px to
the viewport making it a 416px (356 + 60) in height. The image below will explain the process better. So
you have to set a minimum height of 416px to the HTML wrapper for the window to scroll up and hide
the address bar. This way the HTML wrapper will perfectly fit the window.

4. We can use standard java script methods to scroll up,
window.onload = function() {
setTimeout(function() { window.scrollTo(0,1); }, 10);
}
You can see I have called the window.scrollTo() method inside the window load event handler. So when
the page loads, first thing it will do is to scroll up to (x=0,y=1) coordinate position. Now, a y-position of 1
ensures that the window scrolls up vertically to a point from where the viewport starts. An x-pos of 0
means that we do not want to scroll horizontally. Also I have set a timeout delay of 10ms for the
window.scrollTo() to execute. This is to trigger the vertical scrolling after the page and its elements has
been loaded up in the browser and the minimum height (416px) of the wrapper has been rendered.
All set to hide the URL bar, we need to make sure that we set a minimum height to our wrapper. You can
do this in the CSS,
#wrapper
{
width:100%;
height:416px;
}
Alright we have talked about the portrait mode so far. Let’s see how to do it in the landscape mode as well.
In the landscape mode the resolution becomes 480 x 320 pixels, so the height now is 320px. Check out
the image below for the dimensions,

5. One thing that has changed is the height of the button bar. It is 32px now wherein in portrait mode it was
44px. So the viewport height is 208px with the URL bar showing. Now, to hide the URL bar and make it
fulscreen we need to set viewport the wrapper a minimum height of (208 + 60) = 268px. So if you set
your wrapper a minimum height of 268px and use the same javascript technique to scroll up, the URL
bar will be hidden.
This is all that we need to make a full screen mobile web app. Note that I have talked of setting a
minimum height to the wrapper. If you set a height more than the minimum, which you can always do
that will also work perfectly in making it a fulscreen app. For a demo you can open this link in your iPod
or iPhone. Check the source for the full code.