ipad肖像方向css,只有风景才会起作用

Question

如果您在iPad上访问http://eastcoworldwide.com/Proofs/mint/index.html,请单击第1章>第1章>开始使用...您将在加载屏幕后看到第1章页面.

基本上这是什么,是html嵌入到由html 5和javascript拉到一起的iframe中.这个iframe中的html调用自己的名为other.css的css表.把这一切拉到一起的html文件就是调用一个名为styles.css的样式表.

显然,我希望在纵向视图中,此iframe的内容区域小于横向.我在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.但不会使用肖像.真的很奇怪.如果你看到绿色的bg在纵向和横向,它忽略了肖像.如果你看到蓝色它的工作,请帮忙!

顺便说一句,如果我摆脱了风景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