Отзывчивый рекламный блок Adsense не будет отображаться при 320x50 px

Question

У меня есть отзывчивый рекламный блок AdSense, который я хотел бы использовать в качестве своего нижнего колонтитула на моем отзывчивом веб-сайте. Я использую медиа-запросы, как описано в документации Adsense, чтобы установить высоту/ширину на разных ширинах экрана.

Вот мой CSS:

<style> 

@media (min-width: 320px) { 
    .adslot-desktop { 
     width: 320px; 
     height: 50px; 
     display: inline-block; 
    } 
} 

@media (min-width: 500px) { 
    .adslot-desktop { 
     width: 468px; 
     height: 60px; 
     display: inline-block; 
    } 
} 
</style> 

А вот мой HTML:

<ins class="adsbygoogle adslot-desktop" 
    data-ad-client="xxxxx" 
    data-ad-slot="xxxxxx" 
    data-ad-format="auto"></ins> 

При ширине экрана над 500px, я получаю ожидаемый 468х60 объявление. Однако, ниже 500 пикселей, я получаю объявление 320x100.

Почему это не дает мне объявление 320x50, похоже, что я указываю?

Answer 1

Я думаю, что вам нужно удалить data-ad-format, потому что data-ad-format является умный проклейки:

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

О реагирующих рекламных блоков:
https://support.google.com/adsense/answer/3213689

Что вы хотите «точный размер по ширине экрана»:

<style> 
.adslot-desktop { width: 320px; height: 50px; } 
@media (min-width: 500px) { .adslot-desktop { width: 468px; height: 60px; } } 
</style> 
<ins class="adsbygoogle adslot-desktop" 
    style="display:inline-block;" 
    data-ad-client="xxxxx" 
    data-ad-slot="xxxxxx"></ins> 
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script> 

создать адаптивный рекламный блок> Дополнительно> Точный размер на ширину экрана : https://support.google.com/adsense/answer/3543893#adv

Answer 2

Раньше у меня была такая проблема в WP, и единственное, что я делал, это изменить порядок медиа-запросов. Не уверен, что здесь будет одно и то же, но вы можете попытаться это сделать. Наивысшие px вверху, а затем вниз.

** Я сделал это работать, используя максимальную ширину вместо

@media (max-width: 500px) { 
    .adslot-desktop { 
     width: 468px; 
     height: 60px; 
     display: inline-block; 
    } 
} 

@media (max-width: 320px) { 
    .adslot-desktop { 
     width: 320px; 
     height: 50px; 
     display: inline-block; 
    } 

}