Html 不同设备上的不同帧？

我在我的几个网站上都有一个顶栏，它是通过iframe显示的，但是在移动设备上看起来很糟糕，所以我想知道我是否可以把它放在一个div中，然后通过css将div作为目标，如果屏幕小于某个大小，则不显示任何内容

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

我的想法是：

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

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

希望你们能帮助我

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

#div {display:none;}

}

---

同时检查设备宽度，并在“最大设备宽度”功能中使用相同的设置

如果我理解正确，您希望根据屏幕宽度显示不同的URL。我建议制作两个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>

iframe{
宽度：100%；
高度：200px；
}
#移动iframe{
显示：无；
}
@媒体手持设备（最大设备宽度：320px）{
#正常iframe{
显示：无；
}
#移动iframe{
显示：块；
}
}

---

在这里进行实验：

尝试

@仅媒体屏幕和（最大设备宽度：320px）{#div{display:none；}}

，尽管您可以直接瞄准

iframe

。