Subscribe to get my new tutorials in your inbox.

Writing a full screen mobile web app for mobile devices

Here I talk about writing a full screen mobile web app for iPhones/iPods (320 x 480). But similar concepts can be applied to any mobile device out there. Read the post below,

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

Dimensions in portrait mode - 320 x 480
Image1: Dimensions in portrait mode

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.

Full screen in Portrait mode 320 x 480
Image2: Full screen in Portrait mode

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 id="footer">Footer</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 and give it a full screen look.

HTML wrapper minimum height 320 x 480
Image3: HTML wrapper minimum height in portrait mode

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,


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,

Dimensions in landscape mode 480 x 320
Image4: Dimensions in landscape mode

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 the viewport 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 for iPhone/iPod. 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. Hope you find this post useful. I will soon be posting a similar topic for Android devices.

  1. rizecorp

    Today’s market for mobile apps goes beyond the iPhone to include BlackBerry, Nokia, Windows Phone, and smartphones powered by Android, webOS, and other platforms. Anyways thanks for the nice post.

    • joseph

      That’s true. I guess you are talking about native apps. In fact Mobile Web is also evolving with HTML5 and CSS3. However, the best features and results are supported my devices that have a web-kit based browser. iPhone, Android and the new Blackberry’s have it. The methods discussed in this post will work fine for Android and Blackberry as well provided you know the dimensions and set the wrapper height accordingly.

Write a Comment

Your email address will not be published. Required fields are marked *