Медіа-запит, щоб визначити, чи пристрій є сенсорним екраном

Який найбезпечніший спосіб зробити медіа-запити, щоб щось сталося, коли не на пристрої з сенсорним екраном? Якщо немає можливості, чи пропонуєте ви використовувати таке рішення JavaScript, як !window.TouchModernizr?

Я б запропонував використовувати 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: не працює

Здається, рішення CSS не є широко доступними з середини 2013 року. Натомість ...

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-enable

Отже, ось медіа-запит між браузерами:

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

Насправді існує медіа-запит щодо цього:

@media (hover: none) { … }

Крім Firefox, він досить добре підтримується . Сафарі та Chrome, що є найпоширенішими браузерами на мобільних пристроях, може бути достатньою для швидшого використання.

Це спрацює. Якщо це не дає мені знати

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

редагувати: наведення на вимогу більше не підтримується

Це рішення працюватиме до тих пір, поки CSS4 не отримає глобальну підтримку всіх браузерів. Коли настає цей день, просто використовуйте CSS4. але до цього часу це працює для поточних браузерів.

browser-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

Це рішення дозволяє уникнути використання модернізатора, оскільки модернізатор lib - це дуже велика бібліотека. Якщо ви лише намагаєтесь виявити сенсорні екрани, це буде найкраще, коли розмір остаточного скомпільованого джерела є вимогою.

додавання сенсорного екрану класу до тіла за допомогою 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
}    
}