Определение мобильного девайса в виджете

Автор Тема: Определение мобильного девайса в виджете  (Прочитано 1023 раз)

Оффлайн UrsegoАвтор темы

  • Бизнес оценка: (0)
  • Рекрут
  • *
  • СПАСИБО: 19
  • Сообщений: 43
  • Карма: 1
  • Пол: Мужской
    • Просмотр профиля
    • Форумы Канады

Оффлайн UrsegoАвтор темы

  • Рекрут
  • *
Как сделать в виджете, чтобы фрагмент показывался или не показывался в зависимости от того, открыт сайт на большом экране или на мобильном телефоне? В файлах php работает такое условие:

Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
А вот как поступить в ВИДЖЕТЕ, показываемом в боковой панели? Стиль - Mantra.


Оффлайн АлександрВМ

  • Бизнес оценка: (1, 100%)
  • Постоялец
  • ***
  • СПАСИБО: 96
  • Сообщений: 150
  • Карма: 16
  • Пол: Мужской
    • Просмотр профиля

Оффлайн АлександрВМ

  • Постоялец
  • ***
Можно с помощью css
для элемента
<div id="my-content"></div>

стили

@media screen and (min-width: 0px) and (max-width: 400px) {
  #my-content { display: block; }  /* показать на малых экранах */
}
@media screen and (min-width: 401px) and (max-width: 1024px) {
  #my-content { display: none; }   /* спрятать везде кроме*/
}

Оффлайн UrsegoАвтор темы

  • Бизнес оценка: (0)
  • Рекрут
  • *
  • СПАСИБО: 19
  • Сообщений: 43
  • Карма: 1
  • Пол: Мужской
    • Просмотр профиля
    • Форумы Канады

Оффлайн UrsegoАвтор темы

  • Рекрут
  • *
Добавил

Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
в style.css. В коде страницы написал

Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
Но надпись "teeest" высвечивается и на десктопе, и на телефоне. Что я сделал не так?

Оффлайн АлександрВМ

  • Бизнес оценка: (1, 100%)
  • Постоялец
  • ***
  • СПАСИБО: 96
  • Сообщений: 150
  • Карма: 16
  • Пол: Мужской
    • Просмотр профиля

Оффлайн АлександрВМ

  • Постоялец
  • ***
Cтранно, попробуйте id заменить на class

@media screen and (min-width: 0px) and (max-width: 400px) {
  .my-content { display: block; }  /* показать на малых экранах */
}
@media screen and (min-width: 401px) and (max-width: 1024px) {
  .my-content { display: none; }   /* спрятать везде кроме*/
}

<div class="my-content"> Test</div>


 

Похожие темы

  Тема / Автор Ответов Последний ответ
4 Ответов
1272 Просмотров
Последний ответ 15-10-2013, 12:43:28
от Impossible
2 Ответов
2230 Просмотров
Последний ответ 26-08-2014, 17:17:56
от SE Ranking
8 Ответов
2508 Просмотров
Последний ответ 22-11-2014, 14:43:53
от DukeZ
1 Ответов
806 Просмотров
Последний ответ 04-03-2015, 11:13:49
от BLIK
0 Ответов
595 Просмотров
Последний ответ 21-10-2015, 10:38:40
от imanz33