Условная загрузка рекламного кода в зависимости от размера экрана устройства с использованием JavaScript

Question

Как условно отображать рекламу (через рекламный сервер) на экране другого размера для мобильных устройств?

Я не хочу устанавливать показ на none для скрытия контента, так как это искажает количество показов рекламы.

Я хочу внедрить рекламный код (например) в div с использованием клиентского JavaScript без jQuery.

Например,

<div id="adzone"></div>

If width < 768px
   inject ad code for mobile
else
   inject ad code for tablet

Как мне реализовать эту идею?

И как будет обрабатываться ситуация, когда происходит поворот устройства, когда ширина устройства изменяется от 768 пикселей до более 768 пикселей?

Answer 1

Итак, две вещи для покрытия:

Один из способов сделать это - просто сделать так, чтобы JS захватил размер экрана, а затем сообщить об этом вашему серверу при запросе рекламы. Затем сервер может принять решение о том, какое объявление показывать.

Вы говорите о повороте экрана, и вы отметили media-queries в вашем вопросе. @media являются функциями CSS (не JS), которые позволяют настроить внешний вид в зависимости от размера экрана. Вы должны убедиться, что ваши объявления могут каким-либо образом отображаться как вертикально, так и горизонтально - вам не нужно загружать новые объявления каждый раз, когда устройство меняет ориентацию.

Очень точно определить размер экрана можно на устройстве и о том, как оно сообщается. Тем не менее, для мира JavaScript этот пост посвящен тому, что вам нужно знать.