html - iPad css 方向

Question

我想通过使用 ipad 的 css 来测试方向。这是我使用的 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; }
} 

我不确定这是否有效。我尝试通过将设备宽度更改为 320px 在 iphone 模拟器中进行测试。但它没有用。我需要更改此 css 文件中的任何内容吗？这就是我在主页中调用 css 的方式

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

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/