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

【问题标题】：How to not load certain elements based on screen size with javascript/jquery如何使用 javascript/jquery 不根据屏幕大小加载某些元素
【发布时间】：2014-03-13 19:19:46
【问题描述】：

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

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

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

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

我已经用 jquery 尝试了 .html，但它似乎不允许将脚本标签添加到 dom 中。

提前致谢。

【问题讨论】：

一种方法是在页面加载后使用 jQuery 将图像附加到正文，然后将这些图像传输到正确的部分。唯一的问题是页面在开始加载图像之前可能需要一段时间才能完成加载。
我已经解决了这个问题。如果广告是通过 iframe 插入的，则可以做我想要完成的事情。 iframe 提出了一些自己的新问题，但它们在特定情况下可以完成所需的工作。

标签： javascript jquery ads responsive-design

【解决方案1】：

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

【讨论】：

是的，但我需要输出整个块，而不仅仅是图像。并且对于媒体查询，所有元素仍将被加载，某些元素将不会显示。这对于广告是不可接受的，因为广告公司将在广告从未实际向任何访问者显示时注册该广告已加载。
如果您将广告定义为容器的背景图片，那么它应该可以工作。图像将被下载到合适的屏幕尺寸，只有该图像会从服务器请求...

【解决方案2】：

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

【讨论】：

【解决方案3】：

如果您使用的是 DFP，它们在 googletag 对象中内置了响应式广告功能：

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

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

【讨论】：

【解决方案4】：

如果您使用的是 Google DFP，Andyl 提到了他们响应式展示广告的方法，这绝对是一个不错的起点。为此，我要补充一点，您需要为页面上的每个插槽定义尺寸映射（即使它们并非全部响应），否则由于某种原因无法正常工作。

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

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

您还可以将其应用于任何浏览器大小，而不仅仅是最小的。我确实为此写了a short post，尽管它没有比我在这里提供的更多信息。

希望这会有所帮助，

托比

【讨论】：