仅限 iPad 的 CSS + 桌面 CSS 冲突？答案

【问题标题】：iPad-only CSS + Desktop CSS Conflict?仅限 iPad 的 CSS + 桌面 CSS 冲突？
【发布时间】：2013-10-25 21:19:13
【问题描述】：

好的，所以我想要三个单独的 CSS 文件。一种适用于台式机和更大的笔记本电脑。一种用于横向 iPad。还有一个用于 iPad 纵向。

当前 CSS：

<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="css/ipad-landscape.css" />
<link rel="stylesheet" media="all and (min-width: 1025px)" type="text/css" href="css/style.css" />

由于某种原因，我在 Screenfly 上查看时只加载了 style.css：http://quirktools.com/screenfly/。当我将屏幕分辨率降低到上网本或 iPad 时，style.css 将停止使用，但 ipad-landscape.css（当屏幕处于横向时）未加载到位。目前，ipad-landscape.css 和 style.css 的内容是相同的，所以不可能有一个不起作用。是否可以使用多个 CSS 文件来区分屏幕大小？如果是这样，我该如何解决我的问题？

【问题讨论】：

标签： html iphone css ipad

【解决方案1】：

首先，您应该只有一个 css 文件，而应该使用 media queries。

其次，orientation:landscape 是设备发送到浏览器的信息，我很确定 screenfly 只是一个用于查看样式的 iframe。像宽度/高度这样的东西会起作用，但检查方向不会。

尝试在 Xcode 中使用 iOS 模拟器进行测试（如果您使用的是 Mac OS X），或者在实际设备上进行测试，它应该可以工作。

【讨论】：