Question

我有一个响应式网站，可以响应3种不同的尺寸，手机，平板电脑和笔记本电脑。

我有一个广告，只有在视口为＆lt; = 625：

时才会显示

if ( adWidth <= 625 )
        google_ad_size = ["100", "50"]; 

      document.write (
       '<ins class="adsbygoogle" style="display:inline-block;margin-top:45px;width:' 
       + google_ad_size[0] + '%;height:' 
       + google_ad_size[1] + 'px" data-ad-client="' 
       + google_ad_client + '" data-ad-slot="' 
       + google_ad_slot + '"></ins>'
       );

因此，当页面加载时，广告将不会出现，除非它＆lt; = 625。

问题在于，当您调整浏览器大小时，广告不会消失，除非您刷新页面，这是一个问题，因为它打破了我的标题使其无法读取。

我有一些jQuery可以检测是否正在使用媒体查询：

 function media_query(obj) {
     size = obj();
     if (size != currentSize) {
         if (size == 'tablet') {
             var refesh = document.getElementById('sglHead');
             $('#sglHead').html(refresh);
             currentSize = 'tablet';
         }
     }
 }

 $(window).resize(_.debounce(function () {
     media_query(mqCSS);
 }, 10));

正如你所看到的，我试图用.html（）来做这件事，但没有运气：

容器本身如下所示：

那么当媒体查询＆＃34;平板电脑＆＃34;时，如何刷新<header id="sglHead">的内容？是真的吗？

Answer 1

我不认为您“允许”为Adsense刷新容器。我想这可能会使你的数字膨胀。

有关详情，请参阅此帖子：Refresh a Div that has a Google ad inside it

作为一种解决方法，为什么不在广告框周围放置固定大小的div，这意味着无论视口大小是什么，标题都会保持在原位？此外，我认为通过拖动角落来调整浏览器窗口的大小并不是在进行“响应式设计”时应该考虑的因素。我可能错了。

Answer 2

尝试：

setInterval(function() {
    //this code is executed every 4000 ms
}, 4000);

您可以在iframe中添加广告，然后轻松刷新

我想刷新包含AdSense广告的容器

2 个答案: