IPad css orientation

Question

I want to check the orientation 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'm not sure if this will work or not. I tried testing in the iphone emulator, changing the width of the device to 320 pixels. But that did not work. Do I need to change anything in this css file? This is how I call css on the main page

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

Answer 1

I solved the problem using this css.

   @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; }
    } 

Answer 2

This is what I use to call 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 very useful:

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