[algaretio]

Всем привет, Друзья! В последнее время я тестирую на своих сайтах адаптивные блоки 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 и ниже, советуем прежде всего установить размер по умолчанию.

?

Кто сталкивался, подскажите. Думаю данная тема будет актуальна, особенно ввиду того, что сейчас очень много сайтов делают с адаптивным дизайном.

[Rendo]

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