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

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

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

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

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

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

提前致谢。

CSS3媒体查询将根据屏幕大小选择性地输出图像 – 只要图像在CSS被引用…

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

如果您使用的是DFP，则他们会在googletag对象中内置自适应广告function：

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

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

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

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

您也可以将其应用于任何浏览器大小，而不仅仅是最小的浏览器。我确实写了一篇关于此的短文，虽然它没有比我在这里提供的更多信息。

希望这可以帮助，

托比