Автор Тема: Установка баннера в шапке, чтоб он показывался только в разрешении на пк (Прочитано 1892 раз)

alex29 · « : 19 Сентября 2019, 23:27:46 »

Добрый вечер уважаемые форумчане. Подскажите пожалуйста как правильно прописать баннер от линкслота в шапке чтоб он отображался только на мониторах с большим изображением а на телефоне скрывался. Скрипт шапки прилагаю.
вот сам код линкслота баннер размером 468х60 <div id="linkslot_262442"><script src="https://linkslot.ru/bancode.php?id=262442" async></script></div>

Код: [Выделить]

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title><?=$_title; ?> | <?=NAME; ?></title>
    <link rel="SHORTCUT ICON" type="image/png" href="/assets/images/favicon.png">
    <link href="/assets/styles/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/assets/styles/app.css" rel="stylesheet">
    <link href="/assets/plugins/bootstrap-sweetalert/sweet-alert.css" rel="stylesheet" type="text/css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  </head>

  <body class="page">
    <div class="header">
      <div class="header__row container">
        <div class="row">
          <div class="col-md-5 col-xs-12 col-sm-12">
            <div class="logo" style="min-height:32px;">
              <a href="/" class="logo__link">
                <img src="/assets/images/logo.png" class="logo__icon">
              [/url]
            </div>
          </div>
          <div class="header__contact col-md-7 col-xs-12 col-sm-12">

          <?php if (!$this->usid) : ?>

            <a class="btn header__callback" href="/login">
              <span class="btn__text">Вход в аккаунт</span>
            [/url]

          <?php else : ?>

            <a class="btn header__callback" href="/cabinet">
              <span class="btn__text">Мой кабинет</span>
            [/url]

          <?php endif; ?>

          </div>
        </div>
      </div>
      <div class="nav">
        <div class="nav__btn-wrap">
          <button class="btn nav__btn" type="button">
            <span class="btn__text">
              <span class="nav__icon"></span>
            </span>
          </button>
        </div>
      
        <div class="nav__body container">
          <div class="nav__inner">
            <div class="nav__close"></div>
            <ul class="nav__list">
              <li class="nav__item"><a href="/" class="nav__link">Главная[/url]</li>
              <li class="nav__item"><a href="/about" class="nav__link">О проекте[/url]</li>
              <li class="nav__item"><a href="/stats" class="nav__link">Статистика[/url]</li>
              <li class="nav__item"><a href="/guarantee" class="nav__link">Гарантии[/url]</li>
              <li class="nav__item"><a href="/competitions" class="nav__link">Конкурсы[/url]</li>
              <li class="nav__item"><a href="/feedback" class="nav__link">Отзывы[/url]</li>
              <li class="nav__item"><a href="/contacts" class="nav__link">Контакты[/url]</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

GameRussia

Вариантов много. Css @media, js по ширине экрана

Код: [Выделить]

//чистый js

document.addEventListener("DOMContentLoaded", function(event)
{
    window.onresize = function() {
        resize_info();
    };
});
 
function resize_info()
{
    var width = $(window).width();
    if(width < 640){
       document.getElementById('id_bloka').style.visibility = "hidden";
    }else{
       document.getElementById('id_bloka').style.visibility = "visible";
    }
}

//jQuery
$( window ).resize(function() {
        var width = $(window).width();
          if(width < 640){
             $('#id_bloka').hide();
          }else{
             $('#id_bloka').show();
          }
    });

js определение устройства

Код: [Выделить]

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    // код для мобильных устройств
    //чистый js
    document.getElementById('id_bloka').style.visibility = "hidden";
    //вариант с jQuery
    $('#id_bloka').hide();
  } else {
    // код для обычных устройств
    //чистый js
    document.getElementById('id_bloka').style.visibility = "visible";
    //вариант с jQuery
    $('#id_bloka').show();
}

Gamorra · « **Ответ #2 :** 06 Июня 2021, 09:00:29 »

Или можно еще проще:

Код: [Выделить]

 <style>
@media screen and (max-width: 770px) {
#mobile {
visibility: hidden;
display: none;
}}</style>
<div id="mobile">Ваш баннер</div>