Адаптивный блок и код

12
A
На сайте с 20.08.2010
Offline
775
2047

Вынесу в отдельную тему. Можно ли изменить код таким образом, что бы на экранах до 500 px показывался исключительно адаптивный блок на усмотрение системы, а на все, что выше - с заданными размерами? Со вторым вопросом я разобрался, не пойму, что добавить, что бы для мобилок блок был полностью адаптивным.

<style type="text/css">

.adslot_1 { width: 320px; height: 100px; }
@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="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
D.iK.iJ
На сайте с 26.05.2013
Offline
180
#1

Я сделал так вот:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
if(document.getElementsByTagName("body")[0].offsetWidth>=900) {
document.write('<ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-23235352" data-ad-slot="23235235"></ins>');
}else{
document.write('<ins class="adsbygoogle" style="display:block; width: 90%;" data-ad-client="ca-pub-235325" data-ad-slot="235235" data-ad-format="rectangle"></ins>');
}
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

До 900 - адаптивный блок, выше - width:580px; height:400px

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
Z0
На сайте с 03.09.2009
Offline
730
#2

Так а если задать max-width у контейнера, разве не будет показываться максимально возможный?

DiKiJ, так да, через javascript удобно, если надо квадрат показывать на большом разрешении.

D.iK.iJ
На сайте с 26.05.2013
Offline
180
#3
ziliboba0213:
Так а если задать max-width у контейнера, разве не будет показываться максимально возможный?

У меня чувство, что Гугл сейчас впихивает вообще любой размер "от балды". Например, любит очень горизонтальные блоки впихивать под статью.

Да, это лечится заменой у адаптивного блока значения AUTO на rectangle но и тогда впихивает, например, блок 250x250 при ширине свободного места 1800px.

Видимо, сказывается уменьшение количества рекламодателей.

A
На сайте с 20.08.2010
Offline
775
#4
DiKiJ:

До 900 - адаптивный блок, выше - width:580px; height:400px

Спасибо. А ничего, что код именно такого вида? Я использую тот, который рекомендует сам гугл в примерах.

Geers
На сайте с 12.04.2011
Offline
480
#5
awasome:
Спасибо. А ничего, что код именно такого вида? Я использую тот, который рекомендует сам гугл в примерах.

Так тот скрипт подключен от самого гугла.

D.iK.iJ
На сайте с 26.05.2013
Offline
180
#6
awasome:
Спасибо. А ничего, что код именно такого вида? Я использую тот, который рекомендует сам гугл в примерах.

Я создавал для тестирования 2 разных блока. При больших экранах выводится обычный, на маленьких - адаптивный. Но можно и любые другие варианты использовать. Ну и есть похожий код и для Яндекса с его "тизерами".

Пробовал варианты с медиа запросами (для высоты, так как ширина у меня 90% указана) но что-то не очень заметил, чтобы Гугл прислушивался. Думаю протестировать сейчас еще раз.

Redbaron _chaos
На сайте с 12.08.2009
Offline
672
#7

Пока одно понял, если сайт изначально не был адаптирован под моб.версию...то адаптивный код такую фигню показывает, что плакать хочется.

Есть у меня сайт, на движке 2005!!! года.

Ну это жесть получилось, когда с мобилы смотришь. На весь экран какие то объявления показывает, все растянул и т.д., выглядит все убого). Тупо до информации который юзер ищет не добраться.

При этом нормальные блоки (не адаптивные), норм смотрятся. Придется возвращать.

При этом на сайте, который адаптирован под мобильники, все гуд...поставил код как DiKiJ показал, доволен.

Гемблинг, беттинг, бинарка на весь мир в 3snet, 600+ офферов. ( https://clck.ru/P7kyY ) Серпхант ( https://goo.gl/c4vyZ8 ): Проверка позиций в Серпхант – точность и скорость по выгодной цене
A
На сайте с 20.08.2010
Offline
775
#8

Redbaron_chaos, я видел адаптивные сайты с обычными блоками - там показывает только часть блоков с телефона.

Какая-то странная проблема: в мозилле один блок показывает как-то через раз, в других браузерах ок. Сравнивал число показов - чуть больше, чем у другого блока, то есть как и положено, причем второй я всегда вижу. Ф5 помогает не всегда. Проблема именно с адаптивным блоком. Что интересно, не показывает даже из под анонима. Блокировать загрузку нечем, да и после нескольких нажатий на ф5 он опять появляется. Что это может быть?

Redbaron _chaos
На сайте с 12.08.2009
Offline
672
#9

awasome, ну я вот поставил код что выше давали. С компа все норм, отображает какой задал размер. С мобилы захожу...он на весь экран объявления растянул (горизонтально), одно за другим идет.

Второй адаптивный блок, тоже на этой странице..наоборот квадратом...

И в итоге все едет. Инфу смотреть не удобно.

А вот на другом сайте (адаптированном под мобильники), этот же код работает нормально. Ни чего не едет.

В итоге на том сайте поставил обычные блоки. Да и на мобиле они норм отображаются и вышло намного лучше чем с адаптивными.

D.iK.iJ
На сайте с 26.05.2013
Offline
180
#10

Redbaron_chaos, любые старые сайты можно переделать под мобильные платформы - обращайтесь если что :)

А в коде 900 подходит для моих сайтов. У вас может больше надо ставить.

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий