CSS with iPad

Below is a basic CSS iPad layout by Mattew James Taylor. A detailed explanation and the code can be found at his website.

---

Basically,

• Landscape: Width of 1024 pixels wide.
• Portrait: Width of 768 pixels wide.

 @media only screen and (orientation:portrait) {
 /* portrait mode */
 ..CSS code here
}
@media only screen and (orientation:landscape) {
 /* landscape mode */ 
 ..CSS code here
}

If the code is written outside of the above code, it displays in both portrait and landscape mode. Thus, by using display:none; , we can actually mask out certain elements and do the appropriate changes for the respective orientations.