只有横屏模式在iPad竖屏方向下起作用（CSS）

Question

只有横屏模式在iPad竖屏方向下起作用（CSS）

8

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

基本上，这是通过HTML5和JavaScript组合的iframe嵌入的HTML。此iframe中的HTML调用其自己的CSS样式表other.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？

- user1864698

在iframe中提供的CSS能够检测设备方向吗？我从未测试过。你可能需要将问题缩小到支持或实现问题。 - Kurt Emch

这有点像我一直在想的，但它似乎可以检测到 landscape 媒体查询 - 只是将其用于两者。使用此方式覆盖默认的 CSS。如果不支持，它不会忽略媒体查询吗？ - user1864698

我看到了一些帖子，建议您像这样说：http://stackoverflow.com/questions/12185073/using-css-media-queries-with-an-iframe - user1864698

但是我不确定是否正确，因为它只引入了横向的CSS。如果我只有纵向媒体查询，它会优先使用默认的CSS。但是如果我有横向媒体查询，它将覆盖默认值。所以它必须识别查询-常规CSS可以修改iFrame中的内容（它在项目中调用另一个HTML文件）。我在这里错过了什么？太奇怪了。 - user1864698

2个回答

1

你可以尝试创建两个不同的样式表，专门针对桌面和平板电脑，如下所示： <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

- Mark

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- apfrod · Accepted Answer

你应该针对最小或最大设备宽度进行目标定位，否则你将错过某些设备。

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