Как не загружать что-то в DOM на мобильных девайсах

Question

[goodknight]

Здравствуйте. Есть например баннерная флеш-реклама.

<div class="banner">
Some content
</div>

Которую я не хочу показывать на разрешениях, меньших 992px

Я просто создаю media query и ставлю display:none;

Но в таком случае, траффик же она всё равно будет кушать?

Я прочитал, что надо создать еще один div="wrapper", в который мы завернем banner, и если поставить display: none на wrapper, то тогда траффик не будет тратиться.

Вот линк где я вычитал, способ 3
timkadlec.com/2012/04/media-query-asset-downloadin...

Есть ли еще способ?

Answer 1

[Aligatro]

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

Comments

[goodknight]

а JS как? Ведь hide(); это тот же самый display: none, судя по документации. Всё равно грузится ведь будет.

[Aligatro]

А зачем его скрывать, можно же ведь создать. Я в js абсолютно не шарю, так что готовое решение предложить не могу, но скрипт по идее должен работать следующим способом. Высчитываем разрешение экрана и если оно =< чем (какое-то значение), ничего не показываем, если > (какое-то значение), создаем div в который и вкладываем рекламный контент.