4 Способа обнаружения мобильных браузеров в JavaScript

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

1. Свойства в navigator

Мы можем использовать navigator.userAgent, который возвращает строку с информацией об устройстве:

Таким образом, мы можем использовать регулярное выражение, чтобы соответствовать ему, например, используя /Android|iPhone/i.test(navigator.userAgent).

Это, вероятно, наиболее распространенное решение. Но мы можем изменить эту строку самостоятельно, например, используя Object.defineProperty, Reflect.defineProperty и так далее. Потому что описание этого свойства выглядит следующим образом:

Вот пример:

В дополнение к этому, мы также можем использовать navigator.platform. Он указывает тип компьютера, для которого был скомпилирован браузер. Но у него нет единого общедоступного списка, и его можно подделать. Не рекомендуется к использованию.

Существует также navigator.userAgentData, который может разбирать userAgent на объекты:

Его также можно подделать, и его совместимость не очень хороша:

2. Событие Touch

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

Но некоторые ноутбуки также поддерживают касание, если вам нужно его обнаружить, вы можете использовать navigator.maxTouchPoints. Он возвращает максимальное количество точек одновременного касания, поддерживаемых текущим устройством.

Когда ноутбук работает в режиме клавиатуры, значение navigator.maxTouchPoints равно 1; в режиме планшета значение navigator.maxTouchPoints равно 10 или более. А для мобильных устройств обычно значение равно 10 или более.

3. Window.orientation

Мы можем использовать window.orientation, чтобы получить текущую ориентацию экрана, только мобильные устройства обладают этим свойством:

if (typeof window.orientation !== 'undefined') { ... }

Но он был помечен как устаревший, поэтому вам не рекомендуется его использовать. Использование screen.orientation вместо этого указано в MDN. Но screen.orientation также поддерживается на рабочем столе, поэтому его нельзя использовать для определения мобильного устройства.

4. Window.matchMedia()

Метод matchMedia() интерфейса Window возвращает новый объект MediaQueryList, который затем можно использовать для определения соответствия document строке медиа запроса.

Например, устройство, ширина экрана которого не превышает 768px, считается мобильным устройством:

const isMobile = window.matchMedia('only screen and (max-width: 768px)').matches;

Но оценка размера экрана иногда бывает неточной, поэтому мы также можем использовать pointer:coarse, чтобы определить, имеет ли указатель текущего устройства ограниченную точность.

window.matchMedia('(pointer: coarse)').matches;

Но параметр pointer:coarse используется только для определения основного указывающего устройства. Это вернет значение false для этих сенсорных ноутбуков. В этом случае любой указатель может использоваться для определения всех указывающих устройств, а параметр any-pointer: coarse также указывает, имеет ли хотя бы одно указывающее устройство ограниченную точность.

window.matchMedia('(any-pointer: coarse)').matches;

Заключение

Насколько я знаю, в настоящее время не существует идеального решения для обнаружения мобильных браузеров. Все 4 метода, перечисленные выше, имеют некоторые недостатки, и вам, возможно, придется выбирать их в зависимости от вашего конкретного случая. Если вы адаптируетесь к устройствам с маленькими экранами, то, вероятно, лучше всего использовать чистый CSS и стараться избегать обнаружения в JavaScript.