只有横向模式在iPad纵向模式下有效(Css)

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

基本上，这是嵌入到由HTML5和JavaScript组合在一起的iframe中的html。这个iframe中的html调用它自己的css表，名为ther.css。将这一切整合在一起的html文件调用一个名为style es.css的样式表。

显然，我希望在纵向视图中，此iFrame的内容区域要比横向视图中的小。我正在使用其他.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。我尝试了十几种不同的方法(这应该是正确的方法，适用于对整个页面的Styes.css调整)，但它无法识别它。它将只使用风景。这并不是说它看不到媒体的查询，它拉动了css的风景。但不会使用肖像。真的很奇怪。如果你在肖像和风景中看到BG的绿色，它就忽略了肖像。如果看到蓝色，则表示工作正常。我如何实现这一点？

如果我去掉横向的css，它更喜欢默认的，而不是纵向的。这说不通。在方向更改后，iframe是否会阻碍其引入新的css？

---

解决方案

您应该以最小或最大设备宽度为目标，否则会错过设备。

/* 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