Как с гарантией определить, что сайт открыт на смартфоне или планшете?

Question

[zkrvndm]

Существует ли относительно простой способ на JavaScript убедится, что сайт открыт на смартфоне или планшете?

Answer 1

[Владимир]

Плохо формализовання задача.
Что для тебя - сайт открыт на смартфоне или планшете? Тач скрин в тесле это планшет или десктоп?
Сушествуют две разные задачи:
1) Адаптация сайта под малый размер экрана
2) Адаптация под тач интерфейс
Первое решается медиа запросами, адаптивной и резиновой версткой
Второе - детектом тач ивентов в яваскрипте.
А еще есть разная плотность пикселей, которая решается вьюпортом и медиа сетами

Comments

[Владимир]

Pardon Me! Where Do I Find 4giveness?, Касание тремя пальцами, свайпы - все медиа запросами?

Answer 2

[xmoonlight]

Через touch-детект.

И можно добавить ещё проверку ориентации экрана: тут и navigator.userAgent.

Или так:

if(window.matchMedia("only screen and (max-width: 760px)").matches) {
//mobile device
} else {
//not mobile device
}

Или через проверку наличия гироскопа:

var gyroPresent = false;
window.addEventListener("devicemotion", function(event){
    if(event.rotationRate.alpha || event.rotationRate.beta || event.rotationRate.gamma)
        gyroPresent = true;
});

Answer 3

[User]

три простых примера по юзер агенту, window.orientation и regex

Comments

[d-sem]

https://developer.mozilla.org/en-US/docs/Web/API/W... deprecated

useragent произволен

Answer 4

[d-sem]

Простого гарантированного способа не существует.

useragent произволен и вполне может меняться посетителем.
window.orientation deprecated https://developer.mozilla.org/en-US/docs/Web/API/W...

Разные браузеры могут представлять расширенный api доступа к устройству по совокупности которых можно понять что это мобильное устройство. Но это разные браузеры и api может не поддерживаться на них.

Поэтому или довериться useragent'у (простой но не гарантированный способ) или копать в строну различных библиотек и сервисов (гарантированный но простой способ).

Answer 5

[zkrvndm]

Всем спасибо за ответы, я нашел устраивающий меня вариант, который дает 100% гарантию. Буду просто тупо вещать на body обработчик onmouseover и если обнаружена мышка над документом, считаем, что сайт с открыт с ПК и перестраиваем меню для комфортной работы именно с мышкой. Изначально же буду всегда принимать, что сайт открыт на смартфоне и меню держать в режиме работы с тачем, пока не обнаружена мышка.

P. S. Это не сработало, увы. На смартфонах клики распознаются в том числе и как события мыши, хотя мыши нет.

Comments

[xmoonlight]

Отличный вариант именно для подстройки меню!
Взял себе на заметку.

[Владимир]

Я бы делал не так.
1) Для начала я бы нарисовал три варианта дизайна десктоп, планшет и телефон
при чем плашет вертикальный и не больше чем 800 на 600
Сам по себе дизайн под маленькие скрины перекроет потребность в больших паддингах и мержингах для пальцев
2) На больших экранах(например от 1280 на 600) я бы вывел свитч, который позволяет переключится на пальцевый интерфейс и увеличивает паддинги для удобного тыкания (состояние запоминаю в localStorage)
3) Если обнаруживаю тычки пальцами предлагаю пользлвателю переключиться на пальцевый интерфейс

[zkrvndm]

Владимир, у меня меню выглядит одинаково, что на смартфоне, что на ПК. Просто мне требуется немножко разная логика работы для двойного и одинарного клика именно на смартфонах.

[Владимир]

Надим Закиров, А как твой скрипт отреагирует если человек то тыкает то кликает во время одной сессии (бывает на ноутбуках с тачами)

[zkrvndm]

Владимир, пришлось делать определение по ширине экрана, короче все равно не прокатила идея с mouseover.

[Владимир]

Надим Закиров, https://developer.mozilla.org/en-US/docs/Web/API/T...

[xmoonlight]

Pardon Me! Where Do I Find 4giveness?, Супер! Не знал о таком. Добавил в сниппеты себе.
Спасибо!