Как лучше всего обнаружить мобильное устройство?

Question

Есть ли надежный способ определить, использует ли пользователь мобильное устройство в jQuery? Что-то похожее на атрибут CSS @media? Я хотел бы запустить другой скрипт, если браузер находится на портативном устройстве.

Функция jQuery $.browser - это не то, что я ищу.

Answer 1

Вы также можете обнаружить это, как показано ниже

$.isIPhone = function(){
    return ((navigator.platform.indexOf("iPhone") != -1) || (navigator.platform.indexOf("iPod") != -1));

};
$.isIPad = function (){
    return (navigator.platform.indexOf("iPad") != -1);
};
$.isAndroidMobile  = function(){
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf("android") > -1 && ua.indexOf("mobile");
};
$.isAndroidTablet  = function(){
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf("android") > -1 && !(ua.indexOf("mobile"));
};

Answer 2

Это мой код, который я использую в своих проектах:

function isMobile() {
 try {
    if(/Android|webOS|iPhone|iPad|iPod|pocket|psp|kindle|avantgo|blazer|midori|Tablet|Palm|maemo|plucker|phone|BlackBerry|symbian|IEMobile|mobile|ZuneWP7|Windows Phone|Opera Mini/i.test(navigator.userAgent)) {
     return true;
    };
    return false;
 } catch(e){ console.log("Error in isMobile"); return false; }
}

Answer 3

Оформить заказ http://detectmobilebrowsers.com/, который предоставляет вам скрипт для обнаружения мобильного устройства на разных языках, включая

JavaScript, jQuery, PHP, JSP, Perl, Python, ASP, C #, ColdFusion и многие другие

Answer 4

Добавление:

В некоторых версиях iOS 9.x Safari не отображает «iPhone» в navigator.userAgent, но показывает его в navigator.platform.

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
    if(!isMobile){
        isMobile=/iPhone|iPad|iPod/i.test(navigator.platform);
    }

Answer 5

Вы также можете использовать серверный скрипт и устанавливать переменные javascript из него.

Пример в php

скачать http://code.google.com/p/php-mobile-detect/ и затем установить переменные javascript.

<script>
//set defaults
var device_type = 'desktop';
</script>

<?php
require_once( 'Mobile_Detect.php');
$detect = new Mobile_Detect();
?>

<script>
device_type="<?php echo ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'mobile') : 'desktop'); ?>";
alert( device_type);
</script>

Answer 6

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

var isMobile = false;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Opera Mobile|Kindle|Windows Phone|PSP|AvantGo|Atomic Web Browser|Blazer|Chrome Mobile|Dolphin|Dolfin|Doris|GO Browser|Jasmine|MicroB|Mobile Firefox|Mobile Safari|Mobile Silk|Motorola Internet Browser|NetFront|NineSky|Nokia Web Browser|Obigo|Openwave Mobile Browser|Palm Pre web browser|Polaris|PS Vita browser|Puffin|QQbrowser|SEMC Browser|Skyfire|Tear|TeaShark|UC Browser|uZard Web|wOSBrowser|Yandex.Browser mobile/i.test(navigator.userAgent) && confirm('Are you on a mobile device?')) isMobile = true;

Теперь, если вы хотите использовать jQuery для установки CSS, вы можете сделать следующее:

$(document).ready(function() {
  if (isMobile) $('link[type="text/css"]').attr('href', '/mobile.css');
});

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

А что касается подвижной подвижности, я предлагаю вам подумать о идее Йоава Барни :

if(typeof window.orientation !== 'undefined'){...}

Answer 7

Также я рекомендую использовать крошечную библиотеку JavaScript Bowser, да нет.Он основан на navigator.userAgent и довольно хорошо протестирован для всех браузеров, включая iPhone, Android и т. Д.

https://github.com/ded/bowser

Вы можете просто сказать:

if (bowser.msie && bowser.version <= 6) {
  alert('Hello China');
} else if (bowser.firefox){
  alert('Hello Foxy');
} else if (bowser.chrome){
  alert('Hello Silicon Valley');
} else if (bowser.safari){
  alert('Hello Apple Fan');
} else if(bowser.iphone || bowser.android){
  alert('Hello mobile');
}

Answer 8

Я использую это

if(navigator.userAgent.search("mobile")>0 ){
         do something here
}

Answer 9

function isDeviceMobile(){
 var isMobile = {
  Android: function() {
      return navigator.userAgent.match(/Android/i) && navigator.userAgent.match(/mobile|Mobile/i);
  },
  BlackBerry: function() {
      return navigator.userAgent.match(/BlackBerry/i)|| navigator.userAgent.match(/BB10; Touch/);
  },
  iOS: function() {
      return navigator.userAgent.match(/iPhone|iPod/i);
  },
  Opera: function() {
      return navigator.userAgent.match(/Opera Mini/i);
  },
  Windows: function() {
      return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/webOS/i) ;
  },
  any: function() {
      return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
  }
};      
 return isMobile.any()
}

Answer 10

var device = {
  detect: function(key) {
    if(this['_'+key] === undefined) {
      this['_'+key] = navigator.userAgent.match(new RegExp(key, 'i'));
    }
    return this['_'+key];
  },
  iDevice: function() {
    return this.detect('iPhone') || this.detect('iPod');
  },
  android: function() {
    return this.detect('Android');
  },
  webOS: function() {
    return this.detect('webOS');
  },
  mobile: function() {
    return this.iDevice() || this.android() || this.webOS();
  }
};

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