使用 javascript 根据设备屏幕尺寸有条件地加载广告代码

Question

如何有条件地（通过广告服务器）向移动设备的不同屏幕尺寸展示广告？

我不想将显示设置为 none 以隐藏内容，因为这会影响广告展示次数。

我想使用客户端 javascript 将广告代码（例如 ）注入 div 而无需 jQuery。

例如，

<div id="adzone"></div>

If width < 768px
   inject ad code for mobile
else
   inject ad code for tablet

我如何实现这个想法？

当设备宽度从小于 768px 变为大于 768px 时发生设备旋转时，如何处理这种情况？

Answer 1

所以，有两件事要讲：

您可以执行此操作的一种方法是让 JS 捕获屏幕尺寸，然后在请求广告时将其报告给您的服务器。然后服务器可以决定投放哪个广告。

您谈到了屏幕旋转，并且在您的问题中标记了 media-queries。 @media 是 CSS（非 JS）功能，可让您根据屏幕尺寸定制 look/feel。您需要确保您投放的广告能够以某种方式垂直和水平显示 - 您不希望每次设备改变方向时都必须加载新广告。

完全准确地检测屏幕尺寸可以非常适合设备及其报告方式。但是，对于 JavaScript 世界，this SO post 涵盖了您需要了解的内容。