Як виявити мобільний пристрій за допомогою JavaScript?

Question 1

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

Question 2

Я знаю, що ця відповідь прийде із запізненням на 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.
}

Question 3

Ви виявите рядок користувацького агента браузера, що запитує, а потім вирішите, виходячи з того, що це таке, надходить воно з мобільного браузера чи ні. Цей пристрій не ідеальний і ніколи не буде пов’язаний з тим, що користувацькі агенти не стандартизовані для мобільних пристроїв (принаймні, наскільки мені відомо).

Цей сайт допоможе вам створити код: 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>

Question 4

Досить простим рішенням є перевірка ширини екрану. Оскільки майже всі мобільні пристрої мають максимальну ширину екрану 480 пікселів (в даний час), це досить надійно:

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

Рядок агента користувача - це також місце для пошуку. Однак попереднє рішення все-таки краще, оскільки навіть якщо якийсь химер пристрій не реагує належним чином на користувача-агента, ширина екрану не відповідає.

Єдиним винятком тут є планшетні ПК, такі як ipad. Ці пристрої мають вищу ширину екрану, ніж смартфони, і я б, мабуть, вибрав для них рядок користувача-агента.

Question 5

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 
}

Question 6

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

Question 7

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

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

Сподіваюся, це допомагає!

Question 8

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

Question 10

Оскільки зараз 2015 рік, якщо ви натрапили на це питання, то, мабуть, ви повинні використовувати window.matchMedia (і, якщо це все ще 2015 рік, полізаповнення для старих браузерів):

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

Question 11

Ви можете використовувати рядок агента користувача, щоб виявити це.

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

Question 12

Раджу перевірити 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

Це те, що ви шукаєте.

Застереження: я працюю в компанії, яка пропонує цю безкоштовну послугу. Дякую.

Question 13

Це приклад того, як перевірити, чи завантажується веб-сторінка в робочий стіл чи мобільний додаток.

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>

Question 14

Визначте, що таке Агент користувача для пристроїв, які вам потрібно змоделювати, а потім протестуйте змінну щодо цього.

наприклад:

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

Question 15

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

Щоб виявити мобільний телефон, ви можете перевірити наявність сенсорних подій:

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

Взято з Який найкращий спосіб виявити пристрій із сенсорним екраном за допомогою JavaScript?

Question 16

Це моя версія, дуже схожа на верхню, але, на мою думку, це добре для довідки.

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

Question 17

Просто використовуйте DeviceDetection

deviceDetection.deviceType // phone | tablet according to device

Question 18

Інша можливість - використовувати mobile-detect.js . Спробуйте демо .

Використання браузера:

<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

Question 19

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

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

З огляду на це, на сторінці також слід пропонувати ручний вибір між мобільним / настільним макетом. Я отримав 1920 * 1080, і я можу збільшувати масштаб - надто спрощений та зменшений функціональний шматок wordpressoid не завжди є гарною річчю. Особливо примусовуючи макет на основі виявлення неробочого пристрою - це відбувається постійно.

Question 20

Тестування для агента користувача є складним, безладним і незмінно невдалим. Я також не виявив, що збіг засобів масової інформації для "кишенькових" працює для мене. Найпростішим рішенням було виявити, чи доступна миша. І це можна зробити так:

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

Це покаже вам, потрібно вам показувати предмети наведення або ні, а також будь-що інше, що вимагає фізичного вказівника. Тоді розмір можна зробити для подальших запитів медіа на основі ширини.

Наступна невелика бібліотека - це версія запиту, наведеного вище, з фігурними дужками, яка повинна охоплювати більшість сценаріїв "це планшет чи телефон без миші".

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

Збіги медіа підтримуються з 2015 року, і ви можете перевірити сумісність тут: https://caniuse.com/#search=matchMedia

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

Question 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;   
}