Каков наилучший способ сделать самый большой рекламный блок, который вписывается в его контейнер при использовании отзывчивого дизайна?

Ответ 1

AdSense не поддерживает ширину жидкости (не то, что я знаю), но вы можете служить различные размеры в зависимости от фактического размера контейнера с использованием JavaScript.

Посмотрите на это:

http://james.cridland.net/code/dynamic_google_adsense.html

ИЗМЕНИТЬ

Было бы полезно, если бы вы объяснили, как вы использовали пример в приведенной выше ссылке.

Вот более подробный пример как плагин jQuery, который должен работать теоретически.

var google_ad_slot, google_ad_width, google_ad_height;
(function( $ ){
    $.fn.google_ads = function(slots) {
        /* Sort slots by width descending */
        slots.sort(function(a, b){
            var a1 = a[0], b1 = b[0];
            if(a1 == b1) return 0;
            return a1 > b1? -1: 1;
        });
        return this.each(function(){
            /* Get slot container width */
            var width = $(this).width();

            /* Find fitting slot */
            var slot = null;
            $.each(slots, function(){
                slot = this;
                if(width >= slot[0]){
                    return false;
                }
            });

            if( slot !== null ){
                /* Set global variables for external script */
                google_ad_slot = slot[2];
                google_ad_width = slot[0];
                google_ad_height = slot[1];

                /* Append script to slot container */
                var script_el = $('<script>', {
                    'type': 'text/javascript',
                    'src': 'http://pagead2.googlesyndication.com/pagead/show_ads.js'
                }).on('load', function() {
                    /* May need to wait with next slot until script is loaded */
                    console.log('loaded');
                });
                $(this).append(script_el);
            }

        });
    };
})( jQuery );

Пример использования [ширина, высота, слот]

<h2>Slot 1</h2>
<div id="slot-1" class="slot" style="width:300px;"></div>
<h2>Slot 2</h2>
<div id="slot-2" class="slot" style="width:400px;"></div>
<script type="text/javascript">

var google_ad_client = "ca-pub-527527527527527";
$('.slot').google_ads([
    [180, 160, 1234567890],
    [250, 250, 2345678901],
    [300, 250, 3456789012],
    [336, 280, 4567890123],
    [728, 90, 5678901234]
]);

</script>

Более вероятным (и уродливым) способом добиться успеха будет:

<script type="text/javascript">
var get_google_ad_params = function(width, slots){

    /* Sort slots by width descending */
    slots.sort(function(a, b){
        var a1 = a[0], b1 = b[0];
        if(a1 == b1) return 0;
        return a1 > b1? -1: 1;
    });

    /* Find fitting slot */
    var slot = null;
    $.each(slots, function(){
        slot = this;
        if(width >= slot[0]){
            return false;
        }
    });
    return slot;
};

var slots = [
    [180, 160, 1234567890],
    [250, 250, 2345678901],
    [300, 250, 3456789012],
    [336, 280, 4567890123],
    [728, 90, 5678901234]
];
</script>

<h2>Slot 1</h2>
<div id="slot-1" class="slot" style="width:300px;">
    <script type="text/javascript">
    var params = get_google_ad_params($('#slot-1').width(), slots);
    var google_ad_slot = params[2];
    var google_ad_width = params[0];
    var google_ad_height = params[1];
    </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<h2>Slot 2</h2>
<div id="slot-2" class="slot" style="width:400px;">
    <script type="text/javascript">
    var params = get_google_ad_params($('#slot-2').width(), slots);
    var google_ad_slot = params[2];
    var google_ad_width = params[0];
    var google_ad_height = params[1];
    </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>

Ответ 2

Это может показаться немного рудиментарным, особенно по сравнению с ответом Sunn0, но как насчет чего-то такого простого?

function findAd(){
$('.adSlot').each(function(){
    var adSlotWidth = $(this).width();
    if(adSlotWidth >= 728){
        $(this).html(/* GOOGLE AD */);  
    } else if(adSlotWidth >= 336 && adSlotWidth <= 727){
        $(this).html(/* GOOGLE AD */);
    } else if(adSlotWidth >= 300 && adSlotWidth <= 335){
        $(this).html(/* GOOGLE AD */);
    } else if(adSlotWidth >= 250 && adSlotWidth <= 299){
        $(this).html(/* GOOGLE AD */);
    } else{
        $(this).html(/* GOOGLE AD */);
    }
});
}


$(document).ready(function(){

    findAd();
    $(window).resize(function(){
        findAd();   
    });

});

Редактирование для включения кода

Ответ 3

Вы должны иметь возможность вызывать плагин sunn0 при изменении размера окна и работать с ним также на отзывчивость. Однако вы должны изучить дросселирование события изменения размера. Это хороший пост, чтобы прочитать об этом.

http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/