css - 只有横向模式适用于 iPad 纵向(CSS)

Question

如果你去here在 iPad 上，点击 Chapter1 > Chapter 1 > Get started... 您将在加载屏幕后看到第 1 章页面。

基本上，这是将 html 嵌入到由 HTML5 和 JavaScript 拉到一起的 iframe 中。此 iframe 中的 html 调用其自己的名为 other.css 的 css 表。将这一切整合在一起的 html 文件正在调用一个名为 styles.css 的样式表。

显然，我希望在纵向 View 中此 iframe 的内容区域比在横向 View 中小。我在 other.css 中使用 css:

@media only screen and (device-width: 768px) and (orientation:landscape) {
    #content {background:green;}
}


@media only screen and (device-width: 768px) and (orientation:portrait) {
    #content {background:blue;}
}

问题是它甚至没有看到肖像 CSS。我已经尝试了十几种不同的方法(这应该是正确的方法并且适用于对整个页面的 styles.css 调整)但它不会识别它。它只会使用景观。并不是说它不会看到媒体查询，它会拉取横向 CSS。但不会使用肖像。真的很奇怪。如果您在纵向和横向中看到背景为绿色，则忽略纵向。如果你看到蓝色，它正在工作。我怎样才能做到这一点？

如果我去掉横向 CSS，它会更喜欢默认的而不是纵向的。没有意义。 iframe 会不会在方向改变时阻碍它引入新的 CSS？

Answer 1

您应该定位最小或最大设备宽度，否则您将错过设备。

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

来自 http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

这里有一个解释，为什么你可能甚至不应该那么具体 http://catharsis.tumblr.com/post/501657271/ipad-orientation-css-revised