Как самый безопасный способ с помощью медиа-запросов сделать что-то, что происходит не на устройстве с сенсорным экраном? Если нет возможности, вы предлагаете использовать решение JavaScript, такое как !window.Touch
или Modernizr?
css
touch
media-queries
JJJollyjim
источник
источник
Ответы:
Я бы предложил использовать modernizr и использовать его функции медиа-запросов.
Однако с использованием CSS есть псевдокласс, например, в Firefox. Вы можете использовать : -moz-system-metric (с сенсорным экраном) . Но эти функции доступны не для всех браузеров.
Для устройств Apple вы можете просто использовать:
Специально для Ipad:
Но они не работают на Android .
Стильные сенсорные элементы
Модернизатор добавляет классы в тег HTML именно для этой цели. В этом случае,
touch
иno-touch
поэтому вы можете стилизовать ваши прикосновения аспектов , связанных предваряя ваши селекторы с .touch. напр.touch .your-container
. Кредиты: Бен Суинбернисточник
modernizr
будет идеально :)Modernizr.touch
Тест показывает только если поддерживает браузер потрогать события, которые не обязательно отражают сенсорный экран устройства. Например, телефоны Palm Pre / WebOS (сенсорные) не поддерживают события касания и поэтому не проходят этот тест.touch
иno-touch
поэтому вы можете стилизовать ваш сенсорные аспекты , связанные с предваряя ваши селекторы с.touch
. Напр..touch .your-container
На самом деле в черновике медиа-запроса CSS4 есть свойство для этого .
Это будет использоваться как таковое:
Я тоже нашла билет в проекте Chromium, связанный с этим.
Совместимость браузера можно проверить в Quirksmode . Вот мои результаты (22 января 2013 г.):
источник
По состоянию на середину 2013 года решения CSS не были широко доступны. Вместо...
Николас Закас объясняет, что Modernizr применяет
no-touch
класс CSS, когда браузер не поддерживает сенсорное управление.Или обнаружение в JavaScript с помощью простого фрагмента кода, позволяющего реализовать собственное решение, подобное Modernizr:
Затем вы можете написать свой CSS как:
источник
Типы носителей не позволяют обнаруживать сенсорные возможности как часть стандарта:
http://www.w3.org/TR/css3-mediaqueries/
Таким образом, невозможно сделать это последовательно с помощью CSS или медиа-запросов, вам придется прибегнуть к JavaScript.
Нет необходимости использовать Modernizr, вы можете просто использовать простой JavaScript:
источник
window.touch
&&window.TouchEvent
работают только на устройствах Apple.В 2017 году медиа-запрос CSS из второго ответа по-прежнему не работает в Firefox. Я нашел решение для этого: -moz-touch-enabled
Итак, вот кроссбраузерный медиа-запрос:
источник
-moz-touch-enabled
ближайшее время он не потребуется-moz-touch-enabled
предположительно не поддерживается в Firefox 58+. Как и в случае, это решение не распространяется на Firefox 58-63 (поскольку Firefox 64+ поддерживает запрос указателя). Источник: developer.mozilla.org/en-US/docs/Web/CSS/@media/…Для этого есть медиа-запрос:
Помимо Firefox, он довольно хорошо поддерживается . Safari и Chrome - самые распространенные браузеры на мобильных устройствах, и этого может хватить до более широкого распространения.
источник
Это сработает. Если это не дает мне знать
изменить: наведение по требованию больше не поддерживается
источник
Это решение будет работать до тех пор, пока CSS4 не будет глобально поддерживаться всеми браузерами. Когда наступит этот день, просто используйте CSS4. но до тех пор это работает для текущих браузеров.
браузер-util.js
в процессе:
старый способ:
новый способ:
Приведенный выше код добавит класс is-touch в тег body, если устройство имеет сенсорный экран. Теперь любое место в вашем веб-приложении, где у вас будет css для: hover, вы можете вызвать
body:not(.is-touch) the_rest_of_my_css:hover
например:
будет выглядеть так:
Это решение позволяет избежать использования модернизатора, так как библиотека модернизатора очень большая. Если все, что вы пытаетесь сделать, это обнаружить сенсорные экраны, это будет лучше всего, когда размер окончательного скомпилированного исходного кода является требованием.
источник
добавление сенсорного экрана класса в тело с помощью JS или jQuery
источник
Мне удалось решить эту проблему с помощью этого
источник
on-demand
был удален из спецификации и из браузеров: github.com/w3c/csswg-drafts/commit/…