Your SlideShare is downloading. ×
Writing a full screen mobile web app for i phone
Writing a full screen mobile web app for i phone
Writing a full screen mobile web app for i phone
Writing a full screen mobile web app for i phone
Writing a full screen mobile web app for i phone
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Writing a full screen mobile web app for i phone

1,351

Published on

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 …

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.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,351
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Writing a full screen mobile web app for iPhoneThis is one particular post that I was trying to pen down for some time now. I believe for beginners whoare stepping into mobile web development, creating a full screen mobile web app and hidingthe 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/html5and css/css3. I will not be using Sencha Touch or any other mobile web frameworks here. Before readingthrough, check out the demo app in an iPod or an iPhone and notice how the URL bar gets hidden toreveal more of the viewport.The ViewportThe main idea behind a full screen mobile web app is to hide the Address/URL bar so that the app lookslike a native app and occupies the most of the space available within the browser window. Note that weare 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 visiblearea to the user that is available for the app is the viewport. Below is an image of my iPod’s mobile safaribrowser 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. Youcan see from the image that in portrait mode the viewport is only 356px in height. The Status bar andthe Button bar cannot be hidden from the user and will always be displayed. So, at the best we can hidethe 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 cansee the header and footer of the web page. I have set the HTML wrapper height such that it fits thewindow of the browser. Let’s talk on how to do that.
  • 3. Hiding the URL barWhenever 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 outwhy,<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 isonly 356px in height with the URL bar showing. If we scroll up by 60px then we need to add a 60px tothe viewport making it a 416px (356 + 60) in height. The image below will explain the process better. Soyou have to set a minimum height of 416px to the HTML wrapper for the window to scroll up and hidethe 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 whenthe page loads, first thing it will do is to scroll up to (x=0,y=1) coordinate position. Now, a y-position of 1ensures that the window scrolls up vertically to a point from where the viewport starts. An x-pos of 0means that we do not want to scroll horizontally. Also I have set a timeout delay of 10ms for thewindow.scrollTo() to execute. This is to trigger the vertical scrolling after the page and its elements hasbeen 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 cando 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 outthe 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 was44px. So the viewport height is 208px with the URL bar showing. Now, to hide the URL bar and make itfulscreen we need to set viewport the wrapper a minimum height of (208 + 60) = 268px. So if you setyour wrapper a minimum height of 268px and use the same javascript technique to scroll up, the URLbar will be hidden.This is all that we need to make a full screen mobile web app. Note that I have talked of setting aminimum height to the wrapper. If you set a height more than the minimum, which you can always dothat will also work perfectly in making it a fulscreen app. For a demo you can open this link in your iPodor iPhone. Check the source for the full code.

×