iPad css 方向答案

【问题标题】：iPad css orientationiPad css 方向
【发布时间】：2010-07-09 10:25:08
【问题描述】：

我想通过使用 css for 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; }
}

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

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

【问题讨论】：

您介意与我们分享吗？
是的，请在下面发布您的解决方案并接受您自己的答案。

标签： html css ipad orientation

【解决方案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/

【讨论】：

【解决方案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; }
    }

【讨论】：