Question

我在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检测方向？我真的会为此提供一些帮助！

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

编辑：为了澄清一些含糊之处，我已经在几个移动设备上对网站进行了测试，但主要是平板电脑，我试图以此为目标。

Answer 1

这可能是一个糟糕的解决方案，但至少它是有效的，因为我控制了主页面和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。不要忘记将parent.js文件包含在HTML文件的头部中！

<script type="text/javascript" src="js/parent.js"></script>

为什么媒体查询包括方向属性在iframe中无效？

1 个答案: