iPhone Web Application Development—Some Useful Tips Part 3

04/01/2013 15:47

In previous parts we have explored some important aspects of iPhone Web Application Development like documentation, CSS and view port Meta elements and the last topic was discussed partially so in this part we will finish remaining portion of that part and we see further more important aspects.

View port Meta Elements

There are other content of Meta view port element has some more multiple comma-delimited values like initial-scale, the zoom level which display content at initial stage of the page load and the interface whether it is user-scalable.


 


The above given element sets width to the maximum device width, zooms into a zoom level and prohibits user to zoom in & out of the content. This way it looks like a native app.

Orientation

This is somewhat tricky in iPhone web application development as your page need to set with every flip from portraits to landscapes and vice versa. In such situations JavaScript is handy which let you access the property window.orientation and it would have following values:

-> 0 – normal orientation generally in portrait mode where home button is at the bottom
-> -90 – clockwise rotation from portrait to landscape mode where home button is to the left
-> 90 – counterclockwise rotation from portrait to landscape mode where home button is to the right
-> 180 – unsupported for now

You can perform an event when user tilts the device and that is orientationchange and that should be triggered when an alert whenever orientation changes take place by displaying window.orientation value.