iPad css 方向性问题

Question

我想使用CSS来测试iPad的方向。这是我使用的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; }
} 

我不确定这个方法是否有效。我试着在iPhone模拟器中将设备宽度更改为320像素进行测试，但没有成功。我需要在这个CSS文件中做出任何更改吗？

这是我在主页面中调用CSS的方式：

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

- karthick

---

你介意和我们分享吗？ - acme

是的，请在下面发布您的解决方案并接受您自己的答案。 - Sparky

Answer 1

这是我用来调用横向和竖向样式表的方法：

<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">

我为您找到了这个链接，它对您很有帮助：

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

。这个链接是关于如何使用CSS3媒体查询来针对iPhone和iPad进行优化的。

- Charlie

Answer 2

我用了这个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; }
    } 

- karthick