4

我对 iframe 中的媒体查询有疑问。我发现只要我不指定方向，我的媒体查询似乎就可以工作。这个媒体查询工作得很好：

@media
screen and (-webkit-min-device-pixel-ratio: 1)      and (max-device-width: 1024px),
screen and (   min--moz-device-pixel-ratio: 1)      and (max-device-width: 1024px),
screen and (     -o-min-device-pixel-ratio: 1/1)    and (max-device-width: 1024px),
screen and (        min-device-pixel-ratio: 1)      and (max-device-width: 1024px) {
    /*Styles here*/
}

但是当我添加方向属性时，它不再起作用（方向：纵向和方向：横向）：

@media
screen and (-webkit-min-device-pixel-ratio: 1)      and (max-device-width: 1024px) and (orientation: portrait),
screen and (   min--moz-device-pixel-ratio: 1)      and (max-device-width: 1024px) and (orientation: portrait),
screen and (     -o-min-device-pixel-ratio: 1/1)    and (max-device-width: 1024px) and (orientation: portrait),
screen and (        min-device-pixel-ratio: 1)      and (max-device-width: 1024px) and (orientation: portrait) {
    /*Styles here*/
}

类似的媒体查询在我的主要 CSS 中工作得很好，但这个问题只出现在 iframe 中使用的 CSS 文件中。任何人有任何想法如何解决这个问题？是否可以从 iframe CSS 中检测方向？我真的很感激这方面的一些帮助！

看起来还有其他人有同样的问题，但我一直无法找到解决问题的方法。

编辑：为了澄清一些歧义，我已经在几种移动设备上测试了该网站，但主要是我尝试以平板电脑为目标的平板电脑。

4

1 回答 1

0

这可能是一个糟糕的解决方案，但至少它是有效的，因为我控制了主页和 iframe 中显示的页面，所以我看不出应该有任何直接的危险。无论如何，这是我的解决方案：

我有一个想法，可以用 javascript 而不是 CSS 来解决这个问题。但即使使用 javascript，我仍然无法获得正确的方向，所以我猜这个问题实际上源于 iframe 内的页面对其父环境一无所知。但是，我发现如果方法位于名为 parent.js 的文件中，则可以从主页的 javascript 调用方法。这使得创建一个检查主页方向并从 iframe 的 javascript 调用它的方法成为可能。该解决方案当然适用于任何其他类似问题。但是，它确实要求您访问主页面的代码和 iframe 中加载的页面。

编辑：正如评论中提到的 muzzamo，此解决方案是否要求主页的代码和 iframe 的代码位于同一域中。抱歉不清楚！-编辑结束-

来自 parent.js 的代码：

function getDeviceOrientation() {
    var devOri = window.orientation;
    return devOri;
}

来自 iframe.js 的代码：

function changeFontSize() {
    var parentOrientation = parent.getDeviceOrientation();
    //do stuff dependent on value of parentOrientation or whatever
}

如前所述：我不确定这是一个好的解决方案，但至少它是一个解决方案。由于我是 javascript 新手，我仍然希望能对我的解决方案和/或其他（更好的）问题解决方案发表评论。但我希望这会帮助其他有类似问题的人！

PS。不要忘记在 HTML 文件的头部也包含 parent.js 文件！

<script type="text/javascript" src="js/parent.js"></script>
于 2013-06-24T09:19:04.290 回答