Медиа-запрос, чтобы определить, является ли устройство сенсорным экраном

Как самый безопасный способ с помощью медиа-запросов сделать что-то, что происходит не на устройстве с сенсорным экраном? Если нет возможности, вы предлагаете использовать решение JavaScript, такое как !window.Touchили Modernizr?

Я бы предложил использовать modernizr и использовать его функции медиа-запросов.

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc
}

Однако с использованием CSS есть псевдокласс, например, в Firefox. Вы можете использовать : -moz-system-metric (с сенсорным экраном) . Но эти функции доступны не для всех браузеров.

Для устройств Apple вы можете просто использовать:

if(window.TouchEvent) {
   //.....
}

Специально для Ipad:

if(window.Touch) {
    //....
}

Но они не работают на Android .

Modernizr предоставляет возможности обнаружения функций, и обнаружение функций - это хороший способ кодирования, а не кодирования на основе браузеров.

Стильные сенсорные элементы

Модернизатор добавляет классы в тег HTML именно для этой цели. В этом случае, touchи no-touchпоэтому вы можете стилизовать ваши прикосновения аспектов , связанных предваряя ваши селекторы с .touch. напр .touch .your-container. ^{Кредиты: Бен Суинберн}

На самом деле в черновике медиа-запроса CSS4 есть свойство для этого .

Медиа-функция «указатель» используется для запроса информации о наличии и точности указывающего устройства, такого как мышь. Если устройство имеет несколько механизмов ввода, рекомендуется, чтобы UA сообщал характеристики наименее способного указывающего устройства из основных механизмов ввода. Этот медиа-запрос принимает следующие значения:

'none'
- механизм ввода устройства не включает указывающее устройство.

«грубый»
- механизм ввода устройства включает указательное устройство ограниченной точности.

«отлично»
- механизм ввода устройства включает точное указывающее устройство.

Это будет использоваться как таковое:

/* Make radio buttons and check boxes larger if we have an inaccurate pointing device */
@media (pointer:coarse) {
    input[type="checkbox"], input[type="radio"] {
        min-width:30px;
        min-height:40px;
        background:transparent;
    }
}

Я тоже нашла билет в проекте Chromium, связанный с этим.

Совместимость браузера можно проверить в Quirksmode . Вот мои результаты (22 января 2013 г.):

• Chrome / Win: работает
• Chrome / iOS: не работает
• Safari / iOS6: не работает

По состоянию на середину 2013 года решения CSS не были широко доступны. Вместо...

1. Николас Закас объясняет, что Modernizr применяет no-touchкласс CSS, когда браузер не поддерживает сенсорное управление.

2. Или обнаружение в JavaScript с помощью простого фрагмента кода, позволяющего реализовать собственное решение, подобное Modernizr:

   <script>
       document.documentElement.className += 
       (("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch');
   </script>

   Затем вы можете написать свой CSS как:

   .no-touch .myClass {
       ...
   }
   .touch .myClass {
       ...
   }

Типы носителей не позволяют обнаруживать сенсорные возможности как часть стандарта:

http://www.w3.org/TR/css3-mediaqueries/

Таким образом, невозможно сделать это последовательно с помощью CSS или медиа-запросов, вам придется прибегнуть к JavaScript.

Нет необходимости использовать Modernizr, вы можете просто использовать простой JavaScript:

<script type="text/javascript">
    var is_touch_device = 'ontouchstart' in document.documentElement;
    if(is_touch_device) alert("touch is enabled!");
</script>

В 2017 году медиа-запрос CSS из второго ответа по-прежнему не работает в Firefox. Я нашел решение для этого: -moz-touch-enabled

Итак, вот кроссбраузерный медиа-запрос:

@media (-moz-touch-enabled: 1), (pointer:coarse) {
    .something {
        its: working;
    }
}

Для этого есть медиа-запрос:

@media (hover: none) { … }

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

Это сработает. Если это не дает мне знать

@media (hover: none) and (pointer: coarse) {
    /* Touch screen device style goes here */
}

изменить: наведение по требованию больше не поддерживается

Это решение будет работать до тех пор, пока CSS4 не будет глобально поддерживаться всеми браузерами. Когда наступит этот день, просто используйте CSS4. но до тех пор это работает для текущих браузеров.

браузер-util.js

export const isMobile = {
  android: () => navigator.userAgent.match(/Android/i),
  blackberry: () => navigator.userAgent.match(/BlackBerry/i),
  ios: () => navigator.userAgent.match(/iPhone|iPad|iPod/i),
  opera: () => navigator.userAgent.match(/Opera Mini/i),
  windows: () => navigator.userAgent.match(/IEMobile/i),
  any: () => (isMobile.android() || isMobile.blackberry() || 
  isMobile.ios() || isMobile.opera() || isMobile.windows())
};

в процессе:

старый способ:

isMobile.any() ? document.getElementsByTagName("body")[0].className += 'is-touch' : null;

новый способ:

isMobile.any() ? document.body.classList.add('is-touch') : null;

Приведенный выше код добавит класс is-touch в тег body, если устройство имеет сенсорный экран. Теперь любое место в вашем веб-приложении, где у вас будет css для: hover, вы можете вызватьbody:not(.is-touch) the_rest_of_my_css:hover

например:

button:hover

будет выглядеть так:

body:not(.is-touch) button:hover

Это решение позволяет избежать использования модернизатора, так как библиотека модернизатора очень большая. Если все, что вы пытаетесь сделать, это обнаружить сенсорные экраны, это будет лучше всего, когда размер окончательного скомпилированного исходного кода является требованием.

добавление сенсорного экрана класса в тело с помощью JS или jQuery

  //allowing mobile only css
    var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));
    if(isMobile){
        jQuery("body").attr("class",'touchscreen');
    }

Мне удалось решить эту проблему с помощью этого

@media (hover:none), (hover:on-demand) { 
Your class or ID{
attributes
}    
}