Question

所以我有一点谓词。如果在计算机上查看，我有一个显示在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>

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

有没有人知道如何制作它，以便在非移动设备中，只显示包装div内容，而不是警告信息（即有效地将所有非移动设备视为风景）？

我希望这个问题有道理。

提前感谢您的帮助。

Answer 1

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

解决方法可能是，因为您已经在检测桌面/移动浏览器，在iframe中打开时向URL添加特殊的GET参数，即。将?iframe=1添加到URL，然后在代码中（或者如果需要甚至在JS中）检测此参数以向html或body元素添加额外的类。然后，您可以使用此额外类来扩展媒体查询规则。

说过我强烈推荐你现在正在做的事情 - 媒体查询都是为了让网站和应用程序更强烈动态，而不是限制性。禁止用户以他们想要的方式持有他们的设备只会引起抱怨和烦恼，如果您只是使用相同的媒体查询来实现替代布局或缩小横向内容以适应纵向（如果长宽比是真的）则不需要那很重要。

@media only screen Vs. IFRAME

1 个答案: