根据屏幕尺寸更改iframe内容

时间:2015-11-09 16:09:49

标签: javascript jquery css iframe ads

你好我有一个问题我有一个无法调整大小的广告,支持说我可以使用2个广告1用于移动1用于桌面,所以广告是720 x 90,另一个是300 x 100我希望它根据scree大小进行更改以在这两者之间切换:

<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>

如果有人能帮助我,我会非常感激。 感谢。

1 个答案:

答案 0 :(得分: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;}
}