Design iPhone, Android, Blackberry and iPad web page interfaces using CSS media queries

1) Include the following DTD
< !DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd" >

2) Include meta tag < meta name="viewport" content="initial-scale=1.0" >


3) than u need media queries for portrait version and landscape version against the main classes which sets your main width.
these are called media queries.

For instance, Referring to my code I added following code in bottom area of my CSS

@media only screen and (max-width: 999px) {
/* rules that only apply for canvases narrower than 1000px */
}

@media only screen and (device-width: 768px) and (orientation: landscape) {
/* rules for iPad in landscape orientation */
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* iPhone, Android, Blackberry rules here */
}

Enjoy HTML and CSS powers for layout presentation