javascript - 根据屏幕大小更改 iframe 内容

Question

你好，我有一个问题，我有一个广告无法调整大小，支持人员说我可以使用 2 个广告，1 个用于移动设备，1 个用于桌面设备，所以广告尺寸为 720 x 90，另一个尺寸为 300 x 100 i希望它根据屏幕大小进行更改以在这两者之间切换:

<iframe border=0 frameborder=0 marginheight=0 marginwidth=0 width=736 height=98 scrolling=no allowtransparency=true src=zzzz></iframe>

和

<iframe border=0 frameborder=0 marginheight=0 marginwidth=0 width=300 height=100 scrolling=no allowtransparency=true src=iiiiii></iframe>

如果有人能帮助我，我将不胜感激。谢谢。

Answer 1

您可以对这两项进行编码，并根据浏览器大小通过 CSS 隐藏一项。

<iframe class='lg' border=0 frameborder=0 marginheight=0 marginwidth=0 width=736 height=98 scrolling=no allowtransparency=true src=zzzz></iframe>

<iframe class='sm' border=0 frameborder=0 marginheight=0 marginwidth=0 width=300 height=100 scrolling=no allowtransparency=true src=iiiiii></iframe>

CSS:

@media (max-width: 719px) { //set max width to your preferred mobile width.  I used 719 because your large banner is 720.
    .lg {display:none;}
    .sm {display:initial;}
}

@media (min-width: 720px) { //set min width to be larger than the css rule above.
    .lg {display:initial;}
    .sm {display:none;}
}