2014-02-13 4 views
15

В настоящее время я разрабатываю JS-работу для веб-сайта клиентов, который имеет разную функциональность на платформах для настольных компьютеров и планшетов. Рассмотрите:JavaScript, как проверить User Agent for Mobile/Tablet

if(! navigator.userAgent.match(/Android/i) && 
      ! navigator.userAgent.match(/webOS/i) && 
      ! navigator.userAgent.match(/iPhone/i) && 
      ! navigator.userAgent.match(/iPod/i) && 
      ! navigator.userAgent.match(/iPad/i) && 
      ! navigator.userAgent.match(/Blackberry/i)) 
    { 
     // do desktop stuff 

    } else if (navigator.userAgent.match(/iPad/i)) 
    { 
     // do tablet stuff 

    } 

В настоящее время я проверяю только iPad, так как проверка на «андроид» кажется несколько проблематичной, и это очень широкий термин. Есть ли известный метод для различения Android-планшета & с использованием JS?

Большое спасибо, Myles

+2

Таким образом, по комментариям по этому вопросу: http://stackoverflow.com/questions/5341637/how-do-detect-android-tablets-in-general-useragent Существует много таблиц, содержащих «мобильный», в UA. Любой способ обойти это? – Myles

ответ

15

Первое - улучшение состояния

if (navigator.userAgent.match(/iPad/i)) 
{ 
    // do tablet stuff 
} else if(navigator.userAgent.match(/Android|webOS|iPhone|iPod|Blackberry/i)) 
{ 
    // do mobile stuff 
} else { 
    // do desktop stuff 
} 

Во-вторых, добавив недостающие ключевые слова:

if (navigator.userAgent.match(/Tablet|iPad/i)) 
{ 
    // do tablet stuff 
} else if(navigator.userAgent.match(/Mobile|Windows Phone|Lumia|Android|webOS|iPhone|iPod|Blackberry|PlayBook|BB10|Opera Mini|\bCrMo\/|Opera Mobi/i)) 
{ 
    // do mobile stuff 
} else { 
    // do desktop stuff 
} 

И третье, это фактический сценарий обнаружения, который я е:

https://jsfiddle.net/oriadam/ncb4n882/

var 
    ua = navigator.userAgent, 
    browser = /Edge\/\d+/.test(ua) ? 'ed' : /MSIE 9/.test(ua) ? 'ie9' : /MSIE 10/.test(ua) ? 'ie10' : /MSIE 11/.test(ua) ? 'ie11' : /MSIE\s\d/.test(ua) ? 'ie?' : /rv\:11/.test(ua) ? 'ie11' : /Firefox\W\d/.test(ua) ? 'ff' : /Chrome\W\d/.test(ua) ? 'gc' : /Chromium\W\d/.test(ua) ? 'oc' : /\bSafari\W\d/.test(ua) ? 'sa' : /\bOpera\W\d/.test(ua) ? 'op' : /\bOPR\W\d/i.test(ua) ? 'op' : typeof MSPointerEvent !== 'undefined' ? 'ie?' : '', 
    os = /Windows NT 10/.test(ua) ? "win10" : /Windows NT 6\.0/.test(ua) ? "winvista" : /Windows NT 6\.1/.test(ua) ? "win7" : /Windows NT 6\.\d/.test(ua) ? "win8" : /Windows NT 5\.1/.test(ua) ? "winxp" : /Windows NT [1-5]\./.test(ua) ? "winnt" : /Mac/.test(ua) ? "mac" : /Linux/.test(ua) ? "linux" : /X11/.test(ua) ? "nix" : "", 
    mobile = /IEMobile|Windows Phone|Lumia/i.test(ua) ? 'w' : /iPhone|iP[oa]d/.test(ua) ? 'i' : /Android/.test(ua) ? 'a' : /BlackBerry|PlayBook|BB10/.test(ua) ? 'b' : /Mobile Safari/.test(ua) ? 's' : /webOS|Mobile|Tablet|Opera Mini|\bCrMo\/|Opera Mobi/i.test(ua) ? 1 : 0, 
    tablet = /Tablet|iPad/i.test(ua), 
    touch = 'ontouchstart' in document.documentElement; 

EDIT:

Обратите внимание, что таблетки и IPADS рассматриваются как mobile и tablet. Обратите внимание, что есть ноутбуки с сенсорным управлением, мышью и клавиатурой. Другими словами, хороший программист не зависит от touch - вместо этого он поддерживает все три метода ввода во всех случаях.

+0

Насколько это верно? Мне пришлось удалить «Мобильный» из списка, чтобы он не соответствовал iPad. Спасибо –

+0

@MarioParra Таблетки и планшеты являются «мобильными» и «таблетками» – oriadam

+0

... так что вы говорите ... «Вам нужна скидка« двойная проверка »? – Relic