iPad css orientation

Question

i want to test the orientation by using css for ipad.This is the css file i use

@media only screen and (device-width:768px) and(orientation:portrait) {
  body { background: green; }
}


@media only screen and (device-width:768px) and(orientation:landscape) {
  body { background: red; }
} 

I am not sure whether this will work or not. I tried testing in an iphone emulator by changing the device width to 320px.But it didn't work. Do i need to change anything in this css file? This is how i call the css in the main page

<link rel="stylesheet" type="text/css" href="iPad.css" />"

Answer 1

This is what I use for calling stylesheets with landscape and portrait stylesheets:

<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="css/landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="css/portrait.css">

I also found this link for you which is pretty helpful:

http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/