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

Question

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

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

我知道显示：没有； 不能选择，因为广告仍会加载并记录一次展示。 这不是一个选择。

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

我已经尝试过用jquery编写.html文件，但似乎不允许将脚本标签添加到dom中。

提前致谢。

Answer 1

CSS3 Media Queries将根据屏幕大小有选择地输出图像-只要图像在CSS被引用...

Answer 2

如果您使用的是DFP广告管理系统，则它们在googletag对象中内置了自适应广告功能：

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

Answer 3

如果您使用的是Google DFP广告管理系统， Andyl提到了他们的响应式广告显示方法，这绝对是一个不错的起点。 为此，我要补充一点，您需要为页面上的每个插槽定义大小映射（即使它们并非全部响应），否则由于某种原因，任何操作都将无法正常进行。

另外，如果您想在浏览器小于给定的宽度/高度时隐藏广告单元，则该Google文章建议不要为浏览器大小[0，0]定义映射。 但是，我发现这样做确实由于某种原因显示了我最大的广告素材。 我设法通过创建一个最小尺寸映射来隐藏广告，该映射涉及一个不存在的广告素材尺寸，例如

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

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

希望这可以帮助，

托比

Answer 4

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