Javascript / jQuery를 통해 Android 전화 감지


122

사용중인 기기가 모바일 웹 사이트 용 Android인지 어떻게 알 수 있나요?

특정 CSS 속성을 Android 플랫폼에 적용해야합니다.

감사

답변:


223

그것을보십시오 : http://davidwalsh.name/detect-android

자바 스크립트 :

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
  // Do something!
  // Redirect to Android-site?
  window.location = 'http://android.davidwalsh.name';
}

PHP :

$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
if(stripos($ua,'android') !== false) { // && stripos($ua,'mobile') !== false) {
  header('Location: http://android.davidwalsh.name');
  exit();
}

편집 : 일부 의견에서 지적했듯이 이는 99 %의 경우에서 작동하지만 일부 가장자리 사례는 다루지 않습니다. JS에서 훨씬 더 진보 된 방탄 솔루션이 필요하다면 platform.js를 사용해야합니다 : https://github.com/bestiejs/platform.js


5
Android 태블릿도 확인하는 것을 잊지 마세요 : googlewebmastercentral.blogspot.com/2011/03/…

2
예를 들어 Kindle Fire HD 기기에서보고하는 사용자 에이전트에는 'android'라는 단어가 전혀 포함되어 있지 않기 때문에 이것이 Android 기기에서 항상 작동하는 것은 아닙니다.
djbp 2013-06-11

3
navigator.userAgent 접근 방식은 삼성 갤럭시 장치에서 작동하지 않습니다. 브라우저 사양에는 'Android'가 없습니다.
AsafK 2014

2
JS 솔루션의 처음 두 줄은 다음과 같이 단순화 할 수 있습니다.var isAndroid = /Android/i.test(navigator.userAgent)
Dave Koo 2014 년

4
솔루션이 작동하지 않습니다. 다음은 Nokia Lumia 사용자 에이전트입니다. 그리고 무엇을 맞춰보세요? 그것은 안드로이드와 일치합니다 :Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 625; Orange) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537
Sam Jason Braddock


2

Michal의 답변이 최고라고 생각하지만 한 단계 더 나아가 원래 질문에 따라 Android CSS를 동적으로로드 할 수 있습니다.

var isAndroid = /(android)/i.test(navigator.userAgent);
if (isAndroid) {
    var css = document.createElement("link");
    css.setAttribute("rel", "stylesheet");
    css.setAttribute("type", "text/css");
    css.setAttribute("href", "/css/android.css");
    document.body.appendChild(css);
}

1
미디어 쿼리를 사용할 수 있는데 왜 그렇게하고 싶습니까? JS 기기 감지는 앱 설치 초대를 추가하는 것과 같은 개선을 위해서만 사용해야합니다. 페이지 렌더링은 성능 문제와 끔찍한 사용성 경험을 가지기 때문에 절대로 의존해서는 안됩니다.
camilokawerin

1
@camilokawerin 귀하의 답변은 작성자에게 전달되어야합니다. 나는 단순히 그의 질문에 대한 답을 제공하고있었습니다. 하지만 플랫폼 별 CSS를 원하는 경우가 있습니다. 예를 들어, 인터페이스의 비주얼 스타일이 장치와 일치하도록하려는 경우입니다.
drlarsen

2
;(function() {
    var redirect = false
    if (navigator.userAgent.match(/iPhone/i)) {
        redirect = true
    }
    if (navigator.userAgent.match(/iPod/i)) {
        redirect = true
    }
    var isAndroid = /(android)/i.test(navigator.userAgent)
    var isMobile = /(mobile)/i.test(navigator.userAgent)
    if (isAndroid && isMobile) {
        redirect = true
    }
    if (redirect) {
        window.location.replace('jQueryMobileSite')
    }
})()

-3

Node.js 버전, iPad도 잡습니다.

var is_mobile = /mobile|android/i.test (navigator.userAgent);

3
질문이 요구하는대로 Android뿐만 아니라 많은 기기를 포착하기 때문에 작동하지 않습니다.
NickG

1
최소한 다음과 같은 것을 사용하십시오 : /android.*(?=mobile)/i.test(navigator.userAgent); 안드로이드 폰을 감지합니다. 그러나이 정규식에는 "비싼"수량자가 포함되어 있으므로 2 개의 개별 테스트를 사용한 Philip의 답변이 더 적절할 수 있습니다.
Vadim P.
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.