javascript - @media 仅屏幕对比。框架

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 元素。然后，您可以使用这个额外的类来扩展媒体查询规则。

话虽如此，我强烈反对您现在正在做的事情 - 媒体查询都是为了让网站和应用程序更加动态，而不是限制性。禁止您的用户以他们想要的方式握住他们的设备只会引起提示和刺激，如果您只是使用相同的媒体查询来实现替代布局或缩小横向内容以适应纵向，则不需要这么重要。