Как обнаружить мобильное устройство с помощью JavaScript? - PullRequest
Новая
       73

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

72 голосов
/ 12 июля 2011

Меня попросили создать реальную HTML-страницу / JavaScript для имитации обнаружения мобильных устройств (iPhone / iPad / Android) с использованием кода JavaScript. После этого пользователь перейдет на другой экран, который запрашивает у него адрес электронной почты.

Ответы [ 20 ]

74 голосов
/ 26 октября 2014

Я знаю, что этот ответ приходит с опозданием на 3 года, но нет из других ответов действительно на 100% верны. Если вы хотите определить, находится ли пользователь на ЛЮБОЙ форме мобильного устройства (Android, iOS, BlackBerry, Windows Phone, Kindle и т. Д.), Вы можете использовать следующий код: 

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
    // Take the user to a different screen here.
}
26 голосов
/ 12 июля 2011

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

Этот сайт поможет вам создать код: http://www.hand -interactive.com / resources / detect-mobile-javascript.htm

Пример :

Вы можете получить пользовательский агент в javascript, выполнив это: 

var uagent = navigator.userAgent.toLowerCase();

А затем выполните проверки в том же формате, что и этот (просто используя iPhone в качестве быстрого примера, но другие должны быть немного другими) 

function DetectIphone()
{
   if (uagent.search("iphone") > -1)
      alert('true');
   else
      alert('false');
}

Редактировать

Вы бы создали простую HTML-страницу примерно так: 

<html>
    <head>
        <title>Mobile Detection</title>
    </head>
    <body>
        <input type="button" OnClick="DetectIphone()" value="Am I an Iphone?" />
    </body>
</html>
<script>
    function DetectIphone()
    {
       var uagent = navigator.userAgent.toLowerCase();
       if (uagent.search("iphone") > -1)
          alert('true');
       else
          alert('false');
    }
</script>
20 голосов
/ 12 июля 2011

Довольно простое решение - проверить ширину экрана.Так как почти все мобильные устройства имеют максимальную ширину экрана 480px (в настоящее время), это довольно надежно: 

if( screen.width <= 480 ) {
    location.href = '/mobile.html';
}

Строка user-agent также является местом для поиска.Тем не менее, первое решение все же лучше, поскольку даже если какое-то чертово устройство не отвечает правильно за пользовательский агент, ширина экрана не лежит.

Единственное исключение здесь - планшетные ПК, такие как ipad.Эти устройства имеют большую ширину экрана, чем смартфоны, и я бы, вероятно, выбрал для них строку user-agent.

14 голосов
/ 08 апреля 2013 
if(navigator.userAgent.match(/iPad/i)){
 //code for iPad here 
}

if(navigator.userAgent.match(/iPhone/i)){
 //code for iPhone here 
}


if(navigator.userAgent.match(/Android/i)){
 //code for Android here 
}



if(navigator.userAgent.match(/BlackBerry/i)){
 //code for BlackBerry here 
}


if(navigator.userAgent.match(/webOS/i)){
 //code for webOS here 
}
8 голосов
/ 19 ноября 2012 
var isMobileDevice = navigator.userAgent.match(/iPad|iPhone|iPod/i) != null 
    || screen.width <= 480;
6 голосов
/ 06 февраля 2013

Простое решение может быть только css.Вы можете установить стили в своей таблице стилей, а затем настроить их в нижней части.Современные смартфоны выглядят так, будто их ширина составляет всего 480 пикселей, а на самом деле они намного больше.Код для определения меньшего экрана в css: 

@media handheld, only screen and (max-width: 560px), only screen and (max-device-width: 480px)  {
    #hoofdcollumn {margin: 10px 5%; width:90%}
}

Надеюсь, это поможет!

5 голосов
/ 22 июля 2015

Поскольку сейчас 2015 год, если вы наткнулись на этот вопрос, то вам, вероятно, следует использовать window.matchMedia (и, если это все еще 2015 год, полизаполнение для старых браузеров): 

if (matchMedia('handheld').matches) {
    //...
} else {
    //...
}
4 голосов
/ 28 марта 2014

Я использую mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)

4 голосов
/ 14 июля 2015

Так я и сделал. Спасибо всем! 

<head>
<script type="text/javascript">
    function DetectTheThing()
    {
       var uagent = navigator.userAgent.toLowerCase();
       if (uagent.search("iphone") > -1 || uagent.search("ipad") > -1 
       || uagent.search("android") > -1 || uagent.search("blackberry") > -1
       || uagent.search("webos") > -1)
          window.location.href ="otherindex.html";
    }
</script>

</head>

<body onload="DetectTheThing()">
VIEW NORMAL SITE
</body>

</html>
3 голосов
/ 12 июля 2011

Вы можете использовать строку user-agent, чтобы обнаружить это. 

var useragent = navigator.userAgent.toLowerCase();

if( useragent.search("iphone") )
    ; // iphone
else if( useragent.search("ipod") )
    ; // ipod
else if( useragent.search("android") )
    ; // android
etc

Список строк useragent можно найти здесь http://www.useragentstring.com/pages/useragentstring.php

Страница:
...