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

Ответ 1

Я бы предложил использовать 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 предоставляет возможности обнаружения функций, и обнаружение функций является хорошим способом кодирования, а не кодирования на основе браузеров.

Стилизация сенсорных элементов

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

Ответ 2

В проекте CSS4 media есть свойство для этого.

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

нет

"ни один
- Механизм ввода устройства не включает указательное устройство.

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

"отлично
- Механизм ввода устройства включает в себя точное указывающее устройство.

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

/* 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: Works
• Chrome/iOS: не работает
• Safari/iOS6: не работает

Ответ 3

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

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

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

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

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

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

Ответ 4

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

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>

Ответ 5

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

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

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

Ответ 6

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

@media (hover: none) { … }

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

Ответ 7

Это решение будет работать до тех пор, пока 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())
};

OnLoad:

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

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

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

Ответ 8

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

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

Ответ 9

Я смог решить эту проблему с помощью этого

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