Почему @media handheld не срабатывает?

Question

[Александр Тимофеев]

Надо чтобы при клике сдвигалась основная область контента, причём на мобилке больше, ну или на весь экран

@media screen {
    .container.open-sidebar {
        left: -320px;
    }
}
@media handheld {
    .container.open-sidebar {
        left: -720px;
    }
}

Но почему-то на телефоне всё равно срабатывает тот что screen

ps. ещё у меня вот такая штука по вынуждиным причинам стоит, не знаю влияет ли она на это <meta name="viewport" content="width=1290">

Answer 1

[Денис Инешин]

@media handheld - устаревший параметр, который более не используется. Сейчас нужно проверять физические размеры. Вот гайдлайн: https://css-tricks.com/snippets/css/media-queries-...

Comments

[Александр Борисович]

кусок дерьма а не гайд. Какому дебилу пришло в голову детектить устройства по размеру экранов.

[Денис Инешин]

Александр Борисович, когда это было то, дату видели? Если есть что сказать - дайте ссылку на нормальный гайд.

[Александр Борисович]

Денис Инешин, там апдейт у статьи свежий от этого года. Это писец. Как выход определять есть ли поддержка hover. На тач устройствах ховера нет. При css4 уже получше будет определять физ поддержку устройствами разных возможностей и плясать от них. А пока hover

@media (hover:hover)
@media (hover:none)

[RainbowJet]

Александр Борисович, то что нужно, спасибо

[Александр Борисович]

RainbowJet, в довесок https://github.com/biati-digital/glightbox/issues/...

Answer 2

[Александр Борисович]

Используйте

@media (hover:hover)
@media (hover:none)
@media (pointer: coarse) and (any-pointer: fine) {

https://github.com/biati-digital/glightbox/issues/...