使用jQuery可以包含基於屏幕分辨率的文件嗎？

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事件已經結束（或暫停100毫秒），這將只運行，這意味着你將不會創建噸的過程AJAX請求。您也可以設置一個標誌，以便您不會一次運行多個請求，該標誌可以在​​方法的回調函數中解析。

Answer 2

就包括...

使用媒體查詢顯示/阻止無關之一：

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

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