ipad肖像定位css，只有风景才有效 [英] ipad portrait orientation css, only landscape will work

问题描述

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

if you go here on an iPad, http://eastcoworldwide.com/Proofs/mint/index.html and click through to Chapter1 > Chapter 1 > Get started... you will see after a loading screen the Chapter 1 page.

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

Basically what this is, is html embedded into an iframe being pulled together by html 5 and javascript. the html in this iframe calls its own css sheet called other.css. The html file that pulls this all together is calling a stylesheet called styles.css.

显然，我希望在纵向视图中，此iframe的内容区域小于横向。我在other.css中使用css：

Obviously I want in portrait view the content area of this iframe to be smaller than in landscape. I am using the css in other.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在纵向和横向，它忽略了肖像。如果你看到蓝色它的工作，请帮忙！

The problem is that its like it doesn't even see the portrait css. I have tried a dozen different ways ( this is supposed to be the correct way and works for the styles.css adjustments to the whole page) but it will not recognize it. It will only use the landscape. Its not as though it wont see the media queries, it pulls the landscape css. But WILL NOT use the portrait. Really weird. If you see green for the bg in portrait and landscape its ignoring the portrait. If you see blue its working please help!

BTW，如果我摆脱了景观css，它更喜欢肖像的默认值。没有意义。 iframe是否会阻碍其在方向更改时拉入新的css？

BTW, if I get rid of landscape css, it prefers the default to the portrait. makes no sense. Could the iframe be hindering its pulling in new css upon orientation change?

推荐答案

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

You should target min or max device widths or you will miss out devices.

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

Here's an explanation why you probably shouldn't even be that specific http://catharsis.tumblr.com/post/501657271/ipad-orientation-css-revised

这篇关于ipad肖像定位css，只有风景才有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！