Есть ли аналог @media запросов только для мобильных устройств?

Question

[indigogoose]

Здравствуйте!

Столкнулся с вопросом отображения адаптивного сайта на мобильных телефонах с большими экранами (например 2220×1080). С одной стороны они достаточно велики, чтобы вмещать в себя вёрстку сайта для десктопных устройств,
с другой стороны они недостаточно велики, чтобы можно было комфортно читать на экране информацию.
Стандартные media запросы для мобильных телефонов они не "цепляют", тк экран слишком велик.

Есть ли какой-то способ использовать отдельные css только лишь для мобильных устройств?

ps Про Mobile-detect знаю, но не доверяю этому способу.

Comments

[ⓒⓢⓢ]

pixel-ratio? Назовите модель мобильного устройства с 2к css пкс?

[indigogoose]

JRK_DV, Samsung A6 Plus

[2cha.headz]

почему же не доверяете мобайл-детект, с большой вероятностью правильно определяет (бывают огрехи, но не критично), можете проверять еще в медизапросе min-device-pixel-ratio, обычно у мобильников плотность пикселей выше чем у десктопов)

[indigogoose]

2cha, Сейчас посмотрел статистику за 2018 год по десктопным экранам.
Меньше 1024 какие-то доли процента используют.
Может быть не влезать в мобайл-детект, а всё что меньше 1080 определять к мобильным устройствам?

[Сергей delphinpro]

indigogoose, фу-фу-фу.
не надо разделять мобильные и не мобильные устройства.

Просто делайте так, что сайт везде и всегда выглядел адекватно.

[Сергей delphinpro]

Как вы считаете, почему в css нет медиазапроса @media (mobile) {}?
Ответ на этот вопрос развеет все ваши заблуждения. И ответ этот я предлагаю найти вам самому.

Answer 1

[profesor08]

Это всего лишь разрешение экрана. Это количество физических пикселей. На эти цифры при верстке смотреть вообще не надо. Надо смотреть на dp или dip - Density-independent Pixels. Абстрактная ЕИ, позволяющая приложениям выглядеть одинаково на различных экранах и разрешениях. Посмотреть можно в Настройки - Для разработчиков - Минимальная ширина. Это и есть то самое значение, на которое тебе надо упираться, при адаптации под конкретное устройство. Обычно минимум это 320, либо 360, например у iphone x это 375.

Answer 2

[Анатолий]

Используете?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 3

[Genexys]

Вы не то смотрите. Почитайте спеку media какие они значения принемают

Answer 4

[webviktor]

flexbox решает