Адаптивные блоки Adsense и дизайн сайта

(Ответов: 1, Просмотров: 4688)
  1. Дипломник Аватар для algaretio
    • Регистрация: 10.08.2011
    • Сообщений: 220
    • Репутация: 71
    Всем привет, Друзья! В последнее время я тестирую на своих сайтах адаптивные блоки Google Adsense и нужно признать, они показывают весьма неплохие результаты. Однако, просматривая сайты через вебвизор, усек, что у ряда пользователей блоки показываются не так как нужно, точнее будет сказать - не адаптируясь под разрешение дисплея. Тем самым это коробит верстку и блок там, где должен быть 468 x 60, показывает 728 x 90. Это неприемлемо в корне!

    Вот так выглядит код:

    Код HTML:
    <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>
    Вот что дает нам справка Google:

    Правила @media имеют синтаксис CSS3 и поддерживаются всеми современными браузерами. Если вы хотите обеспечить совместимость с более ранними версиями браузеров, например Internet Explorer 7 и ниже, советуем прежде всего установить размер по умолчанию. В этом случае объявление будет отображаться корректно, даже если запросы медиа не обрабатываются. Примечание: управление отображением объявления через указание размера рекламного кода во внешнем файле таблицы стилей CSS официально не поддерживается.
    Увеличив значение здесь до 1100:

    Код HTML:
    @media (min-width:1100px) { .adslot_1 {
      width: 728px; height: 90px;
    }}
    частично вопрос решаем, но примерно 40% случаев остается. Если исходить из справки Google, @media не поддерживают те самые 40%? Тогда как задать вот это:

    Если вы хотите обеспечить совместимость с более ранними версиями браузеров, например Internet Explorer 7 и ниже, советуем прежде всего установить размер по умолчанию.
    ?

    Кто сталкивался, подскажите. Думаю данная тема будет актуальна, особенно ввиду того, что сейчас очень много сайтов делают с адаптивным дизайном.
    • 0
  2. Новичок
    • Регистрация: 23.09.2013
    • Сообщений: 9
    • Репутация: 1
    algaretio, Только дочитал книгу по адаптивному дизайну. Так вот автор советует применять способ "Сначала мобильный, потом десктопный". А если по русски - он предлагает сначала сверстать версию сайта для мобильных устройств с параметрами % а не пикселях, а через @media уже увеличивать диапазоны разрешений. В таком варианте если мы попадаем на компьютер не поддерживающий @media и Java Script - то ему покажется мобильная версия сайта но она растянется под монитор и будет выглядеть вполне приемлемо (разумеется нюансы надо продумать за ранее. Например скрипт поддержки браузером Java Script). Если что непонятно объяснил - скажите. Я сам только начал разбираться с этим - поэтому мог что то неточно сформулировать.
    • 1

    Спасибо сказали:

    algaretio(16.11.2013),

Похожие темы

Темы Раздел Ответов Последний пост
На некоторых страницах не отображаются блоки AdSense
PPC и контекстная реклама 23 01.04.2017 20:37
Новый дизайн google adsense
PPC и контекстная реклама 11 04.12.2011 13:04
Дизайн для сайта под AdSense!
Дизайн сайтов, графика 1 13.09.2011 15:38

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры