Как определить устройство с сенсорным экраном с помощью JavaScript?

Опубликовано: 12 Декабря, 2021

Иногда вы можете захотеть включить в свое веб-приложение некоторые функции, которые должны быть доступны только для устройств с сенсорным экраном. Вам может понадобиться это обнаружение при внедрении более новых интеллектуальных элементов управления для пользователей с сенсорным экраном в игровом приложении или приложении GPS и навигации. Хотя существует множество библиотек JavaScript, таких как Modernizer, jQuery и т. Д., Которые явно предназначены для выполнения таких задач.

Следует отметить, что устройство поддерживает сенсорные события, не обязательно означает, что это исключительно устройство с сенсорным экраном. Многие ультрабуки высокого класса оснащены сенсорным экраном. Поэтому для лучшего взаимодействия с пользователем вам следует рассмотреть еще несколько атрибутов наряду с проверкой устройства с сенсорным экраном.

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

ontouchstart: обработчик событий, который обрабатывает событие, инициированное после прикосновения к элементу DOM.
maxTouchPoints: свойство интерфейса Navigator, доступное только для чтения, возвращает максимальное количество одновременных точек касания, поддерживаемых устройством.
msMaxTouchPoints: То же, что и выше, только с префиксом поставщика «ms» для целевых браузеров IE 10 и ниже.

Синтаксис:

 function is_touch_enabled() {
    return ( 'ontouchstart' in window ) ||
           ( navigator.maxTouchPoints > 0 ) ||
           ( navigator.msMaxTouchPoints > 0 );
 }

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

Выход:

Вывод на несенсорный экран:
Вывод на сенсорный экран:

Пример 2: В этом примере <div> можно перетаскивать, только если устройство поддерживает сенсорное управление.

 <!DOCTYPE html>
 < html >
     
< head >
    < title >
        Detect touch screen device
        using JavaScript
    </ title >
     
    < link href =
 " https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css "
    rel = "stylesheet" >
     
    < script src = " https://code.jquery.com/jquery-1.10.2.js " ></ script >
     
    < script src = " https://code.jquery.com/ui/1.12.1/jquery-ui.min.js " >
    </ script >
     
    < script src=
 " https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/
 jquery.ui.touch-punch.min.js">
    </ script >
 
    < style >
        #draggable {
            width: 150px;
            height: 50px;
            text-align: center;
        }
    </ style >
     
    < script >
        function is_touch_enabled() {
            return ( 'ontouchstart' in window ) ||
                   ( navigator.maxTouchPoints > 0 ) ||
                   ( navigator.msMaxTouchPoints > 0 );
        }
         
        if( is_touch_enabled() ) {
            $(function() {
                $( "#draggable" ).draggable();
            });
        }
    </ script >
 </ head >
 
< body >
    < div id = "draggable" class = "ui-widget-content" >
        < p >Draggable Elements!</ p >
    </ div >
 </ body >
 
</ html > 

Выход:

Вывод на несенсорный экран:
Вывод на сенсорный экран:

JavaScript Вопросы о Web технологиях Picked JavaScript-Misc

Как определить устройство с сенсорным экраном с помощью JavaScript?

РЕКОМЕНДУЕМЫЕ СТАТЬИ