Javascript @仅媒体屏幕与Iframe

所以我有点困难。我有一个链接，如果在计算机上查看，它会显示在iframe中，如果在移动设备上查看，它会显示在父页面中

如果在移动设备上查看，我只希望用户在横向视图中查看页面。因此，我使用了以下代码：

<style type="text/css">
#warning-message { display: none; }
@media only screen and (orientation:portrait){
    #wrapper { display:none; }
    #warning-message { display:block; }
}
@media only screen and (orientation:landscape){
    #warning-message { display:none; }
}
</style>

....

<div id="wrapper">
<!-- page -->
</div>
<div id="warning-message">
please turn to landscape
</div>

#警告消息{显示：无；}
@仅媒体屏幕和（方向：纵向）{
#包装{显示：无；}
#警告消息{display:block；}
}
@仅媒体屏幕和（方向：横向）{
#警告消息{显示：无；}
}
....
请转向风景

但是，由于iframe，出现了问题。如果在计算机上查看，将显示警告消息div，而不是包装内容，尽管计算机屏幕是横向的。我想这是因为iframe是肖像画

是否有人知道一种方法可以使非移动设备中只显示包装器div内容，而不显示警告消息（即有效地将所有非移动设备视为横向）

我希望这个问题有意义

---

提前感谢您的帮助。

不，仅使用CSS是不可能的。您的假设是正确的，如果iframe本身高于wide，那么它也会触发纵向定向规则，因为iframe本质上是一个沙盒浏览器。如果在具有“纵向”大小的桌面浏览器中打开它，将得到相同的结果

解决方法可能是，因为您已经检测到桌面/移动浏览器，在iframe中打开时，向URL添加一个特殊的GET参数，即向URL添加

？iframe=1

，然后在代码中（或者如果需要，甚至在JS中）检测此参数以向

html

或

正文

元素添加一个额外的类。然后，您可以使用这个额外的类来扩展媒体查询规则

话虽如此，我还是强烈建议您不要现在这样做——媒体查询都是为了让网站和应用程序更具动态性，而不是限制性。禁止用户以他们想要的方式手持设备只会引起抱怨和恼怒，如果您只是使用相同的媒体查询来实现替代布局或缩小横向内容以适合纵向（如果纵横比真的那么重要），那么这是不必要的