Здравствуйте, не могу сам понять как лучше скрыть блок на мобильных устройствах если в мета теге 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 пикселей. Есть ли другие варианты определить что пользователь зашел с мобильного устройства?
Средний
