1 Abrikos

  • Abrikos
  • Свой в доску :)
  • Карма: 1 / 0

Тема: Размер баннера в зависимости от разрешения экрана

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

  • admin
  • АлаичЪ
  • Карма: 143 / 2

Re: Размер баннера в зависимости от разрешения экрана

Abrikos, Полагаю, тебе надо загуглить запрос "адаптивная верстка". Можно будет средствами css менять размер блока или изображения. Кажись, это как раз то, что надо? smile

3 Abrikos (01.08.2013 18:30 отредактировано Abrikos)

  • Abrikos
  • Свой в доску :)
  • Карма: 1 / 0

Re: Размер баннера в зависимости от разрешения экрана

Вообщем я сделал средствами javascript, но выходит это модификация кода вызова блока adsense, хотя модификация безобидная и очевидная, без каких либо намеков на темные делишки, но все же могут по жопе надавать. Код прост, идет проверка ширины клиента, которую вы задаете сами и прогружается соответствующий блок adsense, да в эту проверку можно все что угодно засунуть (не только адсенсе) ну и больше условий задать...

<script type="text/javascript"><!--
google_ad_client = "ca-pub-xxxxxxxxxxxxxxxxxx";
function getClientWidth()
{
return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
}

if (getClientWidth() > yyyyy)
{ 
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 728;
google_ad_height = 90;
}
else 
{
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 468;
google_ad_height = 60;
}
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Может у кого есть еще какие мысли ?

  • admin
  • АлаичЪ
  • Карма: 143 / 2

Re: Размер баннера в зависимости от разрешения экрана

Abrikos пишет:

Вообщем я сделал средствами javascript

Хитер бобер smile Классная схема, запомню.
А вообще такие махинации плохо кончаются обычно. Есть плачевный опыт, правда с РСЯ, но все равно.

5 Abrikos (01.08.2013 23:24 отредактировано Abrikos)

  • Abrikos
  • Свой в доску :)
  • Карма: 1 / 0

Re: Размер баннера в зависимости от разрешения экрана

Ну вот и мне кажется что это закончится банном аккаунта adsense, но как не используя javascript сделать, что-то не смекну... Да можно загружать на слои оба баннера не модифицирую код вызова и потом показывать тот что нужен, но тогда один баннер теряется в пустую, ведь по правилам можно загрузить и показать всего три баннера, а так два грузится на одно место, а покажется из них только один, то одно рекламное место теряем, надо чтобы проверка осуществлялась до прогрузки кода открутки и потом уже в зависимости от размера шла загрузка нужного sad

  • admin
  • АлаичЪ
  • Карма: 143 / 2

Re: Размер баннера в зависимости от разрешения экрана

Abrikos, Если что - будет тема для поста smile

7 Abrikos (12.10.2013 15:35 отредактировано Abrikos)

  • Abrikos
  • Свой в доску :)
  • Карма: 1 / 0

Re: Размер баннера в зависимости от разрешения экрана

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

<style type="text/css">
.adslot_1 {
  width: 320px; height: 50px;
}
@media (min-width:500px) { .adslot_1 {
  width: 468px; height: 60px;
}}
@media (min-width:800px) { .adslot_1 {
  width: 728px; height: 90px;
}}
</style>

<ins class="adsbygoogle adslot_1" style="display:inline-block;" data-ad-client="ca-pub-1234" data-ad-slot="5678"></ins>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

В стилях задаете нужные вам разрешения и размеры баннеров, которые вам нужны, хоть под все доступные разрешения от телефонов до ПК ну и data-ad-client="ca-pub-1234" и в data-ad-slot="5678" вставляете данные вашей партнерки и данные вашего баннера соответственно smile Может кому пригодится...