Css 为什么'；t媒体查询，包括iframe中的方向属性工作？

我对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*/
}

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

类似的媒体查询在我的主CSS中工作得很好，但是这个问题只出现在iframe中使用的CSS文件中。有人知道如何解决这个问题吗？ 难道不能从iframe CSS检测方向吗？我真的很想得到一些帮助

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

编辑：

---

为了澄清一些模糊之处，我在几个移动设备上测试了该网站，但这一款主要针对平板电脑。

这可能是一个糟糕的解决方案，但至少它是有效的，因为我控制了主页和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新手，我仍然希望对我的解决方案和/或其他（更好的）解决方案发表评论。但我希望这能帮助其他有类似问题的人

另外，别忘了在HTML文件的头部包含parent.js文件

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

iFrame如何改变方向？你能把屏幕转到一边吗？也许有办法伪造它。我希望iframe中显示的那一面也能检测到设备的方向。但情况可能不是这样？哦，你在移动设备上测试iFrame？我并没有从这个问题中得到答案：）哦，对不起！是的，我在多个移动设备上测试了它=）哦，我忘了提一件事！当在本地浏览器中测试站点时，我收到错误消息“不安全的javascript尝试使用url访问框架…”，但在将站点上载到服务器时，此消息消失。祝大家好运！不需要使用名为parent.js的文件。而且，只有当父IFrame托管在同一个域上时，这才有效？好的，thx@muzzamo！但是如何从我的普通script.js文件调用该方法呢？关于同一领域的内容，你是绝对正确的，我只是在我之前的帖子中有点不清楚！

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