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
