css - chalice 流体布局的 Adsense 灵活性？

Question

这是我的情况，我有一个 css 3 列流体布局(终于掌握了 chalice ，谢谢大家!)并且在我的左列中我有一个 google adsense 广告。对于熟悉这一点的人来说，它们在广告尺寸方面不是很灵活，但我很好奇是否有一种方法可以根据列的宽度更改广告。目前这个专栏占 20%，所以我想也许一个很好的老式“If - Else”语句可以解决问题，但我还没有让它发挥作用。逻辑是假设我们有两个广告，一个 180 像素宽的广告 (a) 和一个 280 像素宽的广告 (b)，所以如果列大于 280 像素，那么它会显示广告 b，否则它会显示广告还有其他人这样做吗？谢谢!

Answer 1

这里有一些注意事项。首先，你用 css 标记了这个问题。如果您只是想使用 css 来隐藏您的逻辑确定不应显示的广告，这样做很简单，但这是一个糟糕的主意。首先，您将隐藏已加载的广告，这是 Google 明确禁止的。接下来，您可能最终会隐藏最先加载的广告，因此在您的网页上获得最“有值(value)”的点击。您不希望展示值(value)较低的广告。

您需要做的是使用 javascript 在页面加载时 确定视口(viewport)宽度，然后选择要加载到您正在谈论的广告位中的广告代码。在尽可能多的浏览器中测试它，因为您需要确保获得正确的视口(viewport)宽度以使该策略起作用。如果由于某种原因它不起作用，请确保回退不会灾难性地折叠布局。这种方法的缺点是，如果用户在页面加载后更改视口(viewport)大小，则广告将打破边界。您至少可以使用 CSS 来缓解这种极端情况，隐藏或裁剪广告的父 div (overflow: hidden;)，这样视口(viewport)大小的更改就不会破坏布局。