如何使用javascript / jquery根据屏幕大小加载某些元素

时间:2012-01-31 20:28:50

标签: javascript jquery ads responsive-design

我正在使用响应式网页设计(通过媒体查询)制作网站。

我想针对不同的屏幕尺寸制作不同的广告。例如,我不希望在手机浏览器访问该网站时显示780by90广告。

我知道显示:无;不是一个选项,因为广告仍会加载并记录展示。这不是一个选择。

基本上,我需要知道如何在找到屏幕分辨率后通过javascript加载广告。我可以找到解决方案,我只是不知道如何在找到后添加广告。

我用jquery尝试过.html但似乎不允许在dom中添加脚本标签。

提前致谢。

4 个答案:

答案 0 :(得分:1)

CSS3媒体查询 将根据屏幕尺寸选择性地输出图像 - 只要图像在CSS中被引用...

答案 1 :(得分:0)

我建议在后端而不是前端进行这种计算。您可以使用诸如WURFL之类的库或类似Apache Mobile Filter的库。

答案 2 :(得分:0)

如果您使用的是DFP,则他们会在googletag对象中内置自适应广告功能:

https://support.google.com/dfp_premium/answer/3423562?hl=en&ref_topic=4390040

您可以根据浏览器的可查看内容区域定义广告尺寸

答案 3 :(得分:0)

如果您正在使用Google DFP广告管理系统Andyl提及他们用于响应展示广告的方法,这绝对是一个很好的起点。对此我要补充一点,您需要为页面上的每个插槽定义大小映射(即使它们并非全部响应),否则由于某种原因无法正常工作。

此外,如果您想在浏览器小于给定宽度/高度时隐藏广告单元,那么Google文章建议定义浏览器尺寸[0,0]的映射。但是,当我这样做时,我发现它实际上出于某种原因显示了我的最大的广告素材。我设法通过创建引用不存在的广告素材尺寸的最小尺寸映射来抑制广告,例如。

.addSize([0, 0], [1, 1])

您也可以将此应用于任何浏览器大小,而不仅仅是最小的浏览器大小。我确实写了a short post这个,虽然它没有比我在这里提供的更多的信息。

希望这有帮助,

托比