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

Question

Допустим, я просто хочу настроить таргетинг на каждый планшет и телефон, независимо от их размера, есть ли для этого медиа-запрос? Возможно ли это сделать без указания размера? Или использование размера - единственный способ нацеливаться на мобильные устройства, а не на настольные ПК?

Answer 1

Я боролся с этим в течение нескольких дней, но хороший способ проверить наличие портативных устройств - это максимальная ширина устройства.Настольные ПК не отправляют это в браузер, но большинство (если не все) карманные компьютеры используют это.

В моем случае я хотел показать сжатую версию сайта на всех устройствах (включая настольные), когда их ширина меньше определенной ширины, для чего я использовал

@media all and (max-width: 640px)

Но определенное всплывающее окно наложения, которое использовало position: fixed, нужно было изменять только на портативных устройствах (поскольку свойство css работает во всех браузерах настольных компьютеров, но не на всех портативных устройствах).Поэтому для этого я использовал дополнительное правило:

@media all and (max-device-width: 640px)

, в котором я нацеливаюсь на все карманные компьютеры ниже 640, но не на настольные браузеры.Кстати, это также не нацелено на iPad (как я и хотел), потому что его ширина устройства выше, чем 640 пикселей.

Если вы хотите настроить таргетинг на все устройства, просто выберите минимальную ширину (1 пиксель)чтобы оно не исключало ни одно устройство независимо от ширины.

Answer 2

В спецификации CSS3 упоминается @media handeld, но, возможно, нет поддержки браузера.

Итак, нет.

Однако вы можете найти этот сайт полезен, он объясняет некоторые другие методы медиа-запросов для мобильных устройств.

Answer 3

Я не думаю, что вам повезет с подходом чистого CSS. Вы захотите сделать что-то в соответствии с подходом modernizer.js, и мы используем JS, чтобы обнаружить устройство и добавить имя класса в тело на основе этого.

Как лучше всего обнаружить мобильное устройство в jQuery?

Затем включите этот класс в свои медиазапросы к мобильным устройствам разных размеров.