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

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

ОТВЕТЫ

Ответ 1

Я знаю, что этот ответ наступает через 3 года, но none других ответов действительно на 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.
}

Ответ 2

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

Этот сайт поможет вам создать код: 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');
}

Edit

Вы бы создали простую 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>

Ответ 3

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

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

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

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

Ответ 4

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 
}

Ответ 5

var isMobileDevice = navigator.userAgent.match(/iPad|iPhone|iPod/i) != null 
    || screen.width <= 480;

Ответ 6

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

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

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

Ответ 7

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

if (matchMedia('handheld').matches) {
    //...
} else {
    //...
}

Ответ 8

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

Ответ 9

Итак, я сделал это. Спасибо всем!

<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>

Ответ 10

Вы можете использовать строку 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

Ответ 11

Советую вам проверить http://wurfl.io/

Вкратце, если вы импортируете крошечный JS файл:

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

у вас останется объект JSON, который выглядит следующим образом:

{
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}

(предположим, что вы используете Nexus 7, конечно), и вы сможете делать такие вещи, как:

WURFL.complete_device_name

Это то, что вы ищете.

Отказ от ответственности: я работаю в компании, предлагающей этот бесплатный сервис. Спасибо.

Ответ 12

Это пример того, как проверить, загружена ли веб-страница в настольном или мобильном приложении.

JS будет выполняться при загрузке страницы, и вы можете делать определенные на рабочем столе вещи при загрузке страницы, например, скрывать сканер штрих-кода.

   <!DOCTYPE html>
    <html>
    <head>
     <script type="text/javascript">

            /*
            * Hide Scan button if Page is loaded in Desktop Browser
            */
            function hideScanButtonForDesktop() {

                if (!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent))) {

                    // Hide scan button for Desktop
                    document.getElementById('btnLinkModelScan').style.display = "none";
                }         
            }

            //toggle scanButton for Desktop on page load
            window.onload = hideScanButtonForDesktop;
        </script>
    </head>

Ответ 13

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

например:

// var userAgent = navigator.userAgent.toLowerCase(); // this would actually get the user agent

var userAgent = "iphone"; /* Simulates User Agent for iPhone */
if (userAgent.indexOf('iphone') != -1) {
   // some code here
}

Ответ 14

Это моя версия, очень похожая на верхнюю, но я думаю, что это хорошо для справки.

if (mob_url == "") {
  lt_url = desk_url;
} else if ((useragent.indexOf("iPhone") != -1 || useragent.indexOf("Android") != -1 || useragent.indexOf("Blackberry") != -1 || useragent.indexOf("Mobile") != -1) && useragent.indexOf("iPad") == -1 && mob_url != "") {
  lt_url = mob_url;
} else {
  lt_url = desk_url;
}

Ответ 16

Обнаружение устройства на основе пользовательского агента не очень хорошее решение, лучше обнаружить такие функции, как сенсорное устройство (в новом jQuery они удаляют $.browser и используют $.support).

Чтобы обнаружить мобильный телефон, вы можете проверить события касания:

function is_touch_device() {
  return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
}

Взято из Каков наилучший способ обнаружения устройства "сенсорного экрана" с использованием JavaScript?

Ответ 17

Просто используйте DeviceDetection

deviceDetection.deviceType // phone | tablet according to device

Ответ 18

Другая возможность - использовать mobile-detect.js. Попробуйте demo.

Использование браузера:

<script src="mobile-detect.js"></script>
<script>
    var md = new MobileDetect(window.navigator.userAgent);
    // ... see below
</script>

Node.js/Express:

var MobileDetect = require('mobile-detect'),
    md = new MobileDetect(req.headers['user-agent']);
// ... see below

Пример:

var md = new MobileDetect(
    'Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i' +
    ' Build/4.1.A.0.562) AppleWebKit/534.30 (KHTML, like Gecko)' +
    ' Version/4.0 Mobile Safari/534.30');

// more typically we would instantiate with 'window.navigator.userAgent'
// as user-agent; this string literal is only for better understanding

console.log( md.mobile() );          // 'Sony'
console.log( md.phone() );           // 'Sony'
console.log( md.tablet() );          // null
console.log( md.userAgent() );       // 'Safari'
console.log( md.os() );              // 'AndroidOS'
console.log( md.is('iPhone') );      // false
console.log( md.is('bot') );         // false
console.log( md.version('Webkit') );         // 534.3
console.log( md.versionStr('Build') );       // '4.1.A.0.562'
console.log( md.match('playstation|xbox') ); // false

Ответ 19

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

var is_handheld = 0;//просто глобальный if (window.DeviceOrientationEvent) {is_handheld = 1;}

При этом, imho страница также должна предлагать ручной выбор между макетом мобильного/рабочего стола. Я получил 1920 * 1080, и я могу увеличить масштаб - упрощенное и уменьшенное по функциям словосочетание не всегда хорошо. Особенно заставляя компоновку на основе обнаружения нерабочего устройства - это происходит все время.

Ответ 20

Тестирование для пользовательского агента является сложным, грязным и неизменно терпит неудачу. Я также не обнаружил, что совпадение средств массовой информации для "портативного" работает на меня. Самым простым решением было определить, была ли мышь доступна. И это можно сделать так:

var result = window.matchMedia("(any-pointer:coarse)").matches;

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

Следующая небольшая библиотека представляет собой версию запроса с поясными скобками, которая должна охватывать большинство сценариев "Вы планшет или телефон без мыши".

https://patrickhlauke.github.io/touch/touchscreen-detection/

Медиа-совпадения поддерживаются с 2015 года, и вы можете проверить совместимость здесь: https://caniuse.com/#search=matchMedia

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

Ответ 21

Аналогично нескольким ответам выше. Эта простая функция очень хорошо работает для меня. Это актуально на 2019 год

function IsMobileCard()
{
var check =  false;

(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);

return check;   
}