@anttoshka

Как скрыть блок на мобильных устройствах с указанным viewport?

Здравствуйте, не могу сам понять как лучше скрыть блок на мобильных устройствах если в мета теге viewport для страницы указываю какое-то конкретное значение ширины сайта. Суть в том что этот блок должен показываться на страницах для дектопов и скрываться на мобильных. Viewport нельзя указать width=device-width т.к. часть страниц не адаптируется для мобильных и должна вмещаться на 100% ширины экрана мобильного устройства.
window.innerWidth возвращает ширину viewport.
Пример типа такого:
<head>
<meta name="viewport" content="width=1100">
</head>
<body>
 
<div class="block"></div>
 
</body>

@media handheld, all and (max-width: 1023px) {
.block {
  position: fixed;
  display: none;
  width: 50px;
  height: 50px;
  }
}

Я так понимаю, что медиазапрос просто не срабатывает т.к. ширина вьюпорта не уменьшается меньше 1100 пикселей. Есть ли другие варианты определить что пользователь зашел с мобильного устройства?
  • Вопрос задан
  • 9573 просмотра
Пригласить эксперта
Ответы на вопрос 4
@media only screen and (max-width: 767px ) {
.block {display: none;}
}

Разумеется, 767px - на своё значение меняется.
Ответ написан
SKolt
@SKolt
https://www.instagram.com/seregamih/
handheld уже не поддерживается. И all вам тоже не нужен.
Просто напишите так:
@media screen and (max-width: 1023px) {
.block {
  position: fixed;
  display: none;
  width: 50px;
  height: 50px;
  }
}


Тогда стили будут подхватываться, когда ширина рабочего окна браузера будет равна либо меньше 1023 пикселей.
Ответ написан
Комментировать
sergey_st
@sergey_st
Можно с помощью matthewhudson.me/projects/device.js
Ответ написан
Комментировать
@cssfish
Плохое знание основ - причина больших бед
прицепите device.js и пишите стили в духе

.mobile .block,
.table .block {
    ololo
}


* эта шутка занимается анализом userAgent
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы