Обнаружение телефона / планшета / веб-клиента с помощью javascript

Я пытаюсь определить, находится ли конечный пользователь на телефоне, планшете или ПК

Я некоторое время гуглил, по-видимому, нет простого решения.

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

Я не должен полагаться на ориентацию, потому что ноутбуки windows8 могут просто вращаться, как планшеты. (и адаптивный дизайн слишком сложен для моего текущего проекта)

Я пытаюсь используйте UserAgent (думал, что у него тоже есть свои недостатки), но не может заставить его работать, ниже приведено сочетание разных версий онлайн, которые я использую, чтобы отличить телефон / планшет от ПК, они просто не работают, и я понятия не имею, почему

var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry','iemobile','phone','mobile'];
                for(i in agents) {
                    if(navigator.userAgent.toLowerCase().match('/'+agents[i]+'/i')) {
                        return true;
                    }
                }


if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
                return true;
            }

 if( navigator.userAgent.match(/Android/i)
                 || navigator.userAgent.match(/webOS/i)
                 || navigator.userAgent.match(/iPhone/i)
                 || navigator.userAgent.match(/iPad/i)
                 || navigator.userAgent.match(/iPod/i)
                 || navigator.userAgent.match(/BlackBerry/i)
                 || navigator.userAgent.match(/Windows Phone/i)
                 || navigator.userAgent.match(/bada/i)
                 || navigator.userAgent.match(/Bada/i)
                 ){
                return true;
            }
7
browser-detection device-detection javascript

4 ответов

Да, вы не должны полагаться на разрешение или ориентацию. Но как насчет медиа-запросов на основе em?

чтобы прочитать результаты вашего медиа-запроса с помощью javascript, вы можете попробовать добавить медиа-запрос в свой css, чтобы добавить невидимый контент на свою страницу:

@media all and (max-width: 45em) {
    body:after {
        content: 'smallscreen';
        display: none;
    }
}

затем прочитайте содержимое через javascript:

var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');

затем определите, что вы хотите загрузить:

if (size.indexOf('smallscreen') !=-1) {
    // Load some content for smaller screens.
}
12

пользовательские агенты довольно ненадежны и могут быть подделаны клиентами. Я бы рекомендовал сосредоточиться на конкретной функциональности, а не на конкретных устройствах. модернизатор - это библиотека, которая может использоваться для определения, доступны ли функции на клиентском устройстве. Это позволит вам определить, доступны ли такие вещи, как локальное хранилище и т. д. Если вас интересует что-то вроде Адаптивный Веб-Дизайн вместо специфических особенностей прибора / клиента, вы смогли использовать а библиотека, как Twitter загрузки. В нижней части страницы лесов он даже имеет некоторые функции, которые позволяют обнаруживать телефон против планшета против рабочего стола, хотя я считаю, что он основан на разрешении.

--Edit для добавления--

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

3

Я бы рекомендовал изучить медиа-запросы и <viewport> тег.

некоторые отличные статьи о мыслительных процессах за отзывчивым дизайном.

http://www.html5rocks.com/en/mobile/mobifying/

http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brand

остается вопрос, Чего вы пытаетесь достичь?

2

быстрый ответ, почему матч агента не работает против данного списка:" Android " не находится в возвращаемой строке (agent)! Просто предположим, что ни одна из заданных строк не верна, и лжецы изобилуют.

Я опубликовал протестированный код, доказывающий случай android.

-1