Question

如果你在iPad上访问http://eastcoworldwide.com/Proofs/mint/index.html并点击进入第1章＆gt;第1章＆gt;开始...您将在加载屏幕后看到第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

Answer 2

你可以尝试做的是创建两个不同的样式表，专门用于桌面和桌面。这样的平板 <link rel="stylesheet" media="screen" href="css/stylesheet1.css">  <link rel="stylesheet" href="css/tablet-nav.css" media="screen and (min-width: 800px) and (max-width: 1024px)"> 

并且不要忘记添加;

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/ http://webdesignerwall.com/tutorials/css3-media-queries

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

2 个答案: