💡 Несмотря на то что наши баннеры не подстраиваются под тип устройства, вы можете легко настроить показ различных размеров рекламы в зависимости от устройства. Этот простой CSS-трюк покажет вам, как это сделать.
Установка
Все, что вам нужно сделать, это добавить этот код туда, где бы вы хотели разместить баннеры:
<style type="text/css">
.mobileShow {display: none;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
.mobileShow {display: inline;}
}
.mobileHide { display: inline; }
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
.mobileHide { display: none;}
}
</style>
<div class="mobileShow"> Your code snippet for mobile </div>
<div class="mobileHide"> Code snippet for desktop only </div>
❗️ Не забудьте подставить баннерные коды из личного кабинета вместо "Your code snippet for mobile" и "Code snippet for desktop only".
Вы можете воспользоваться любым методом установки кода: напрямую в HTML (однако не в секцию <head>), через виджеты/гаджеты, через элемент custom HTML и т.д
Самая оптимальная комбинация — это 728x90 и 320x50 баннеры, однако вы можете выбрать любой другой вариант.
Проверка
Chrome Dev Tools позволяет проверить, как выглядит ваш сайт на разных устройствах.
Откройте свой веб-сайт, щелкните правой кнопкой мыши в любом месте страницы и выберите "Просмотреть код"; откроется панель инструментов Chrome Dev Tools
Нажмите Toggle Device Toolbar в правом верхнем углу панели
Выберите мобильное устройство из выпадающего списка