Допустим, я просто хочу настроить таргетинг на каждый планшет и телефон, независимо от размера. Есть ли для этого медиа-запрос? Можно ли это сделать без указания размера? Или использование размера — единственный способ ориентироваться на мобильные устройства, а не на настольные компьютеры?
css медиа-запросы: таргетинг на мобильные устройства без указания ширины, соотношения пикселей и т. д.
Ответы (3)
В спецификации CSS3 упоминается @media handeld, но, возможно, он не поддерживается браузером.
So, no.
Тем не менее, этот сайт может оказаться вам полезным, на нем объясняются другие методы медиазапросов для мобильных устройств. .
person
bookcasey
schedule
02.12.2011
Я боролся с этим в течение нескольких дней, но хороший способ проверить портативные устройства — это max-device-width. Настольные ПК не отправляют это в браузер, но большинство (если не все) карманных компьютеров используют это.
В моем случае я хотел показать сжатую версию сайта на всех устройствах (включая рабочий стол), когда ширина меньше определенной, для чего я использовал
@media all and (max-width: 640px)
Но определенное всплывающее окно оверлея, которое использовало position: fixed, должно было быть изменено только на портативных устройствах (поскольку свойство css работает во всех настольных браузерах, но не на всех портативных устройствах). Поэтому для этого я использовал дополнительное правило:
@media all and (max-device-width: 640px)
В котором я нацелен на все карманные компьютеры ниже 640, но не на настольные браузеры. Кстати, это также не предназначено для iPad (как я и хотел), потому что его ширина устройства больше, чем 640 пикселей.
Если вы просто хотите настроить таргетинг на все устройства, просто выберите небольшую минимальную ширину (1 пиксель), чтобы она не исключала ни одно устройство независимо от ширины.
person
Stephan Muller
schedule
02.04.2012
Chrome сообщает о максимальной ширине устройства, прежде чем кто-либо пойдет по этому пути.
- person eighteyes; 15.01.2013
Мне пришлось отказаться от своих медиа-запросов и использовать JS для небольших окон браузера.
- person eighteyes; 22.01.2013
Как вы относитесь ко всем хорошим телефонам с шириной ›= 720 пикселей? Я имею в виду, что за пределами мира Apple 720p уже давно является нормой, и я не вижу, насколько просто max-device-width является приемлемым решением.
- person Morg.; 03.10.2013
В этом конкретном случае мне нужны были только устройства размером менее 640 пикселей. Если вы прочитаете весь ответ, я также утверждаю, что использование
min-device-width из 1 захватит все устройства (но не рабочие столы). Это часть device, которая захватывает устройство, а не ширину
- person Stephan Muller; 03.10.2013
вы не обновили свой ответ ... он предназначен не только для портативных устройств
- person nights; 08.12.2015
Упс. У меня такое чувство, что ответ в любом случае устарел в наши дни. Я посмотрю, смогу ли я найти обновленную информацию, я уже давно не работал над проектом, для которого мне это было нужно.
- person Stephan Muller; 08.12.2015
Я не думаю, что вам повезет с чистым CSS-подходом. Вы захотите сделать что-то вроде подхода modernizer.js и использовать JS для обнаружения устройства и добавления имени класса к телу на основе этого.
Как лучше всего обнаружить мобильное устройство в jQuery?
Затем включите этот класс в свои медиа-запросы к специальным мобильным устройствам разного размера.
person
Keith Brings
schedule
18.07.2014
