Question

我在我的几个网站上有一个顶级栏，通过iframe显示，但是它在移动设备上看起来很糟糕，所以我想知道我是否可以把它放在一个div中然后通过显示css来定位div如果屏幕小于特定大小，则为none。

理想的做法是在桌面上展示一个iframe，在移动设备上展示另一个iframe。

我在想：

@media only screen and (max-device-width : 320px) 
#div {display:none;}

我完全不知道如何使用不同的来源显示iframe，这对我来说是理想的解决方案。

希望你们能帮助我

Answer 1

@media handheld and (max-device-width : 320px) 
{

#div {display:none;}

}

检查您的设备宽度，并在max-device-width功能中使用相同的设置。

Answer 2

如果我理解正确，您希望根据屏幕宽度显示不同的网址。我建议制作两个iframe，其中一个显示：none和另一个显示：block。然后在屏幕小于x px时切换其显示属性。

类似的东西：

<style>
iframe {
    width: 100%;
    height: 200px;
}
#mobile-iframe {
    display: none;
}
@media handheld and (max-device-width : 320px) {
    #normal-iframe {
        display: none;        
    }
    #mobile-iframe {
        display: block;
    }
}
</style>

<iframe id="normal-iframe" src="http://test.com"></iframe>
<iframe id="mobile-iframe" src="http://test.com/help/"></iframe>

在此进行试验：http://jsfiddle.net/zTzRA/

不同设备上的不同帧？

2 个答案: