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.

Image1: Dimensions in portrait mode

HTML5 Canvas Paint App for iPhone

While working on a project I created this simple HTML5 Canvas Paint application for mobile touch devices. It runs on mobile safari (iOS touch devices) and also runs on android devices, since both have web-kit browsers. The code is very simple. JavaScript touch events have been used to listen to user’s touch movements on the screen and then the co-ordinates of the move are recorded for drawing. Also I have a clear button to clear everything on the Canvas and redraw. No multiple color support for drawing is there in the app as of now. You can see a screenshot of the app below, ignore my drawing though, it’s too bad. After the screenshot, the full code is provided.