css media запросы: конфликт между настольными и новейшими разрешениями смартфонов

Question

Поскольку новые телефоны имеют действительно большое разрешение экрана (например, 1280), мне интересно, каков самый умный способ сделать медиа-запрос CSS, предназначенный ТОЛЬКО для телефонов с 1280. Проблема у меня заключается в том, что если я сделаю это:

@media only screen and (min-width:1136px) and (max-width:1280px)

Я включу некоторые размеры разрешений для рабочего стола и хочу, чтобы между рабочим столом и мобильным отображался другой интерфейс.

Есть ли где-нибудь хорошая практика / решение для этого?

Большое спасибо!

Answer 1

Отличным способом нацеливания на такие устройства, как смартфоны, было бы использование min-device-width а также max-device-widthнапример,

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Smartphone queries here */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* iPad queries here */
}

Кроме того, вы можете использовать функцию "Обнаружение мобильных браузеров" для обнаружения мобильных устройств / планшетов.

Answer 2

Для мобильных устройств просто попробуйте проверить min-device-width и / или max-device-width,

Другая возможность - проверить соотношение пикселей на устройстве, на которое вы ориентируетесь.

Answer 3

Пользовательский агент нюхает.

Это не очень хорошая практика, но если вы отыскиваете пользовательские агенты на стороне сервера и обслуживаете другой контент (html/css/js) для клиента (телефон, рабочий стол), это работает.

Лучше спросите себя, для каких функций предназначен ваш пользовательский интерфейс, например, сенсорный экран, размер экрана и т. Д. Чтобы определить это, вы можете использовать медиазапросы CSS и http://modernizr.com/