使用 jQuery 是否可以包含基于屏幕分辨率的文件？答案

【问题标题】：Using jQuery is it posible to include a file based on screen resolution?使用 jQuery 是否可以包含基于屏幕分辨率的文件？
【发布时间】：2012-07-10 10:42:14
【问题描述】：

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

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

如果我没记错的话，我可以使用 Google AdSense 提供的自适应广告单元。

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

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

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

提前谢谢大家。

【问题讨论】：

你是什么意思“包括一个或另一个”？您总是可以在暂存页面中使用 JS 获得屏幕分辨率，然后重定向到其中一个，不是吗？

标签： jquery html responsive-design media-queries adsense

【解决方案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);
});

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

【讨论】：

谢谢 Jasper，这很快！

【解决方案2】：

只需包含两者...

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

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

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

【讨论】：

我想过这样做，但我认为这违反了 TOS。我认为 Google 不会希望我隐藏他们的广告，因为仍在提供展示。