0

所以我有一点困境。如果在计算机上查看，我有一个链接显示在 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 内容，而不显示警告消息（即有效地将所有非移动设备视为横向）？

我希望这个问题是有道理的。

提前感谢您的帮助。

4

1 回答 1

0

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

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

话虽如此，我强烈反对您现在正在做的事情 - 媒体查询都是关于使网站和应用程序更具动态性，而不是限制性的。禁止您的用户以他们想要的方式握住他们的设备只会引起投诉和烦恼，如果您只是使用相同的媒体查询来实现替代布局或缩小横向内容以适应纵向，则不需要如果纵横比真的是那很重要。

于 2013-08-20T21:48:34.837 回答