8

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

基本上这是什么，是嵌入到 iframe 中的 html 被 HTML5 和 JavaScript 组合在一起。此 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。但不会使用肖像。真的很奇怪。如果您在纵向和横向中看到背景为绿色，则忽略纵向。如果你看到蓝色，它正在工作。我怎样才能做到这一点？

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

4

2 回答 2

2

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

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

于 2012-12-03T16:49:25.573 回答
1

您可以尝试做的是专门为台式机和平板电脑创建两个不同的样式表； <link rel="stylesheet" media="screen" href="css/stylesheet1.css"> <!--Desktop--> <link rel="stylesheet" href="css/tablet-nav.css" media="screen and (min-width: 800px) and (max-width: 1024px)"> <!--tablet-->

并且不要忘记添加；

<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

于 2012-12-10T22:50:39.133 回答