Запрос мультимедиа для определения, является ли устройство сенсорным экраном



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

134   8  

8 ответов:

Я бы предложил использовать 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 (touch-enabled). Но эти функции доступны не для каждого браузера.

на Яблоко устройств, вы можете просто использовать:

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

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

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

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

Modernizr дает способности обнаружения особенности, и обнаруживать особенности хороший способ кодирования, а не кодирование на основе браузеров.

Стиль Сенсорных Элементов

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

есть на самом деле собственность в css4 media query draft.

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

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

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

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

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

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

  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 media из второго ответа по-прежнему не работает в Firefox. Я нашел решение для этого: - moz-touch-enabled


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

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

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

@media (hover: none) { … }

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

это решение будет работать до тех пор, пока 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 для : наведите курсор можно вызвать body:not(.is-touch) the_rest_of_my_css:hover

например:

button:hover

будет:

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

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

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

  //allowing mobile only css
    var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));
    if(isMobile){
        jQuery("body").attr("class",'touchscreen');
    }
    Ничего не найдено.

Добавить ответ:
Отменить.