Question

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

本网站正在利用Google广告来帮助货币化。

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

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

有没有其他人试图实现类似的东西？您使用了哪些技术来实现这一目标？

如果我打败某人解决方案，我会编辑我的问题/帖子以包含我的解决方案。

提前谢谢大家。

Answer 1

这将从指定文件中获取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);
});

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

Answer 2

只包括两个......

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

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

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

使用jQuery是否可以根据屏幕分辨率包含文件？

2 个答案: