1

我正在开发的网站使用 CSS 中的媒体查询来根据屏幕大小调整布局。

该网站正在使用 Google Ads 来帮助获利。

如果我是正确的，我可以使用 Google AdSense 提供的响应式广告单元。

我的想法是创建两个包含文件（google-300x250.html 和 google-320x50.html），并根据当前屏幕分辨率包含一个或另一个。

有没有其他人尝试过实现类似的东西？您使用了哪些技术来完成这项工作？

如果我击败某人获得解决方案，我将编辑我的问题/帖子以包含我的解决方案。

谢谢大家。

4

2 回答 2

3

这将从指定文件中获取 HTML 并将其加载到容器中：

$(window).on('load', function () {
    if ($(this).width() > 320) {
        $('#my-container').load('google-320x50.html');
    } else {
        $('#my-container').load('google-300x250.html');
    }
});

这是如果您使用 iframe 来显示外部页面。您需要做的就是更新 iframe 的源代码：

$(window).on('load', function () {
    if ($(this).width() > 320) {
        $('#my-iframe').attr('src', 'google-320x50.html');
    } else {
        $('#my-iframe').attr('src', 'google-300x250.html');
    }
});

这些代码块320px用作显示一个或另一个版本的断点。此外，如果您还想支持窗口调整大小，您可以更改代码以在window.resize事件而不是window.load事件上运行，但您应该限制它，使其不会运行太频繁。

例如：

var timer   = null;
$(window).on('load', function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
        if ($(this).width() > 320) {
            $('#my-container').load('google-320x50.html');
        } else {
            $('#my-container').load('google-300x250.html');
        }
    }, 100);
});

这只会在调整大小事件完成（或暂停 100 毫秒）后运行，这意味着您不会在此过程中创建大量 AJAX 请求。您还可以设置一个标志，这样您就不会一次运行多个请求，该标志可以在该.load()方法的回调函数中解析。

于 2012-07-10T21:17:57.977 回答
0

只需将两者都包括...

使用您的媒体查询来显示/阻止不相关的查询：

@media (max-width:500px) {
#largeAd{display:none}
#smallAd{display:block}
 }

@media (min-width:500px) {
#largeAd{display:block}
#smallAd{display:none}
 }
于 2012-07-10T21:31:13.457 回答