모바일 장치를 감지하는 가장 좋은 방법은 무엇입니까?

사용자가 jQuery에서 모바일 장치를 사용하고 있는지 여부를 감지하는 확실한 방법이 있습니까? CSS @media 속성과 비슷한 것이 있습니까? 브라우저가 핸드 헬드 장치에있는 경우 다른 스크립트를 실행하고 싶습니다.

jQuery $.browser함수는 내가 찾고있는 것이 아닙니다.

편집자 주 : 사용자 에이전트 감지는 최신 웹 앱에 권장되는 기술이 아닙니다. 이 사실을 확인하려면이 답변 아래의 주석을 참조하십시오. 기능 감지 및 / 또는 미디어 쿼리를 사용하여 다른 답변 중 하나를 사용하는 것이 좋습니다.

jQuery를 사용하는 대신 간단한 JavaScript를 사용하여 감지 할 수 있습니다.

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

또는 jQuery를 통해 더 쉽게 액세스 할 수 있도록 두 가지를 결합 할 수 있습니다 ...

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

이제 위의 모든 장치로 $.browser돌아갑니다."device"

참고 : jQuery v1.9.1에서$.browser 제거되었습니다 . 그러나 jQuery 마이그레이션 플러그인 코드를 사용하여 이것을 사용할 수 있습니다.

보다 철저한 버전 :

var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|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|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /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(navigator.userAgent.substr(0,4))) { 
    isMobile = true;
}

나에게 작은 것은 아름답 기 때문에이 기술을 사용하고 있습니다.

CSS 파일에서 :

/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
  #some-element { display: none; }
}

jQuery / JavaScript 파일에서 :

$( document ).ready(function() {      
    var is_mobile = false;

    if( $('#some-element').css('display')=='none') {
        is_mobile = true;       
    }

    // now i can use is_mobile to run javascript conditionally

    if (is_mobile == true) {
        //Conditional script here
    }
 });

내 목표는 내 사이트를 "모바일 친화적"으로 만드는 것이 었습니다. 그래서 CSS 미디어 쿼리를 사용하여 화면 크기에 따라 요소를 표시하거나 숨 깁니다.

예를 들어, 모바일 버전에서는 Facebook Like Box를 활성화하고 싶지 않습니다. 모든 프로파일 이미지와 내용을로드하기 때문입니다. 모바일 방문자에게는 좋지 않습니다. 따라서 컨테이너 요소를 숨기는 것 외에도 jQuery 코드 블록 (위) 에서이 작업을 수행합니다.

if(!is_mobile) {
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=210731252294735";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}

http://lisboaautentica.com 에서 실제로 볼 수 있습니다.

나는 여전히 모바일 버전으로 작업하고 있으므로이 글을 쓸 때 여전히 제대로 보이지 않습니다.

dekin88에 의해 업데이트

미디어 감지를 위해 내장 된 JavaScript API가 있습니다. 위의 솔루션을 사용하는 대신 다음을 사용하십시오.

$(function() {      
    let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

    if (isMobile) {
        //Conditional script here
    }
 });

브라우저 지원 : http://caniuse.com/#feat=matchmedia

이 방법의 장점은 더 간단하고 짧을뿐 아니라 필요에 따라 더미 요소를 DOM에 추가하지 않고도 스마트 폰 및 태블릿과 같은 다른 장치를 개별적으로 대상으로 지정할 수 있다는 것입니다.

Mozilla 에 따르면 -사용자 에이전트를 사용한 브라우저 감지 :

요약하면, 모바일 장치를 감지하려면 사용자 에이전트의 어느 곳에서나“Mobi”라는 문자열을 찾는 것이 좋습니다.

이처럼 :

if (/Mobi/.test(navigator.userAgent)) {
    // mobile!
}

모바일 모질라, 사파리, IE, 오페라, 크롬 등 모든 일반적인 모바일 브라우저 사용자 에이전트와 일치합니다.

안드로이드 업데이트

태블릿 용 Chrome 사용자 에이전트 문자열 에 "Mobi"가 포함되어 있지 않기 Android때문에 EricL 은 사용자 에이전트로도 테스트 할 것을 권장 합니다 (전화 버전에는 해당).

if (/Mobi|Android/i.test(navigator.userAgent)) {
    // mobile!
}

간단하고 효과적인 원 라이너 :

function isMobile() { return ('ontouchstart' in document.documentElement); }

그러나 위의 코드는 터치 스크린이있는 랩톱의 경우를 고려하지 않습니다. 따라서 @Julian 솔루션을 기반으로 두 번째 버전을 제공합니다 .

function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
}

모바일 장치를 감지하여 수행하는 작업이 "브라우저 스니핑"개념 IMO에 너무 가깝습니다. 일부 기능 감지를 수행하는 것이 훨씬 낫습니다. http://www.modernizr.com/ 과 같은 라이브러리 가 도움이 될 수 있습니다.

예를 들어, 모바일과 비 모바일 사이의 경계는 어디에 있습니까? 매일 점점 더 흐릿 해집니다.

jQuery는 아니지만 http://detectmobilebrowser.com/을 찾았습니다.

여러 언어로 모바일 브라우저를 감지하는 스크립트를 제공하며 그 중 하나는 JavaScript입니다. 그것은 당신이 찾고있는 것을 도울 수 있습니다.

그러나 jQuery를 사용하므로 jQuery.support 콜렉션을 알고 자 할 수 있습니다. 현재 브라우저의 기능을 감지하기위한 속성 모음입니다. 설명서는 다음과 같습니다. http://api.jquery.com/jQuery.support/

나는 당신이 무엇을 성취하려고하는지 정확히 알지 못하기 때문에, 이것들 중 어느 것이 가장 유용한 지 모르겠습니다.

모든 말을 들어, 최선의 방법은 서버 측 언어를 사용하여 다른 스크립트를 출력으로 리디렉션하거나 작성하는 것입니다 (옵션 인 경우). 실제로 모바일 브라우저 x의 기능을 모르기 때문에 서버 측에서 감지 및 변경 논리를 수행하는 것이 가장 신뢰할 수있는 방법입니다. 물론, 서버 측 언어를 사용할 수 없다면 그 모든 것이 논점입니다. :)

때때로 iPhone 스토어 또는 Android 마켓에 대한 링크와 같이 해당 장치에 특정한 콘텐츠를 표시하기 위해 클라이언트가 사용하는 브랜드 장치를 알아야합니다. Modernizer는 훌륭하지만 HTML5 또는 Flash와 같은 브라우저 기능 만 보여줍니다.

다음은 각 장치 유형마다 다른 클래스를 표시하는 jQuery의 UserAgent 솔루션입니다.

/*** sniff the UA of the client and show hidden div's for that device ***/
var customizeForDevice = function(){
    var ua = navigator.userAgent;
    var checker = {
      iphone: ua.match(/(iPhone|iPod|iPad)/),
      blackberry: ua.match(/BlackBerry/),
      android: ua.match(/Android/)
    };
    if (checker.android){
        $('.android-only').show();
    }
    else if (checker.iphone){
        $('.idevice-only').show();
    }
    else if (checker.blackberry){
        $('.berry-only').show();
    }
    else {
        $('.unknown-device').show();
    }
}

이 솔루션은 Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/의 솔루션입니다.

http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/ 에서 해결책을 찾았습니다 .

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

그런 다음 모바일인지 확인하려면 다음을 사용하여 테스트 할 수 있습니다.

if(isMobile.any()) {
   //some code...
}

"모바일"이 "작은 화면"을 의미하는 경우 다음을 사용합니다.

var windowWidth = window.screen.width < window.outerWidth ?
                  window.screen.width : window.outerWidth;
var mobile = windowWidth < 500;

iPhone에서는 window.screen.width가 320이됩니다. Android에서는 window.outerWidth가 480이됩니다 (Android에 따라 다를 수 있음). iPad와 Android 태블릿은 768과 같은 숫자를 반환하므로 원하는대로 전체 화면을 볼 수 있습니다.

당신이 사용하는 경우 모더 나이저를 , 그것은 매우 쉽게 사용할 수 있나요 Modernizr.touch앞서 언급 한 바와 같이.

그러나 Modernizr.touch안전한 사용을 위해 조합 및 사용자 에이전트 테스트를 사용하는 것이 좋습니다.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

Modernizr을 사용하지 않으면 Modernizr.touch위 의 함수를('ontouchstart' in document.documentElement)

또한 사용자 에이전트를 테스트 iemobile하면보다 다양한 탐지 된 Microsoft 모바일 장치를 제공 할 수 있습니다 Windows Phone.

또한이 SO 질문을 참조하십시오

당신은에 의존 할 수 navigator.userAgent없는 모든 장치는 실제 OS를 보여준다. 예를 들어 내 HTC에서 설정에 따라 다릅니다 ( "모바일 버전 사용"설정 / 해제). 에 http://my.clockodo.com , 우리는 단순히 사용하는 screen.width소형 장치를 탐지 할 수 있습니다. 불행히도 일부 안드로이드 버전에는 screen.width에 버그가 있습니다. 이 방법을 userAgent와 결합 할 수 있습니다.

if(screen.width < 500 ||
 navigator.userAgent.match(/Android/i) ||
 navigator.userAgent.match(/webOS/i) ||
 navigator.userAgent.match(/iPhone/i) ||
 navigator.userAgent.match(/iPod/i)) {
alert("This is a mobile device");
}

나는이 질문에 많은 답변이 있음을 알고 있지만 아무도 내가 본 것을 해결하는 방법으로 답변에 접근하지 못했음을 알았습니다.

CSS는 너비 (미디어 쿼리)를 사용하여 너비를 기준으로 웹 문서에 적용되는 스타일을 결정합니다. JavaScript에서 너비를 사용하지 않는 이유는 무엇입니까?

예를 들어 부트 스트랩의 (Mobile First) 미디어 쿼리에는 4 개의 스냅 / 브레이크 포인트가 있습니다.

• 초소형 장치는 768 픽셀 이하입니다.
• 소형 장치의 범위는 768 ~ 991 픽셀입니다.
• 중형 장치의 범위는 992 ~ 1199 픽셀입니다.
• 대형 장치는 1200 픽셀 이상입니다.

이를 사용하여 JavaScript 문제도 해결할 수 있습니다.

먼저 창 크기를 가져오고 응용 프로그램을보고있는 장치 크기를 확인할 수있는 값을 반환하는 함수를 만듭니다.

var getBrowserWidth = function(){
    if(window.innerWidth < 768){
        // Extra Small Device
        return "xs";
    } else if(window.innerWidth < 991){
        // Small Device
        return "sm"
    } else if(window.innerWidth < 1199){
        // Medium Device
        return "md"
    } else {
        // Large Device
        return "lg"
    }
};

이제 함수가 설정되었으므로 값을 ans store라고 부를 수 있습니다.

var device = getBrowserWidth();

당신의 질문은

브라우저가 핸드 헬드 장치에있는 경우 다른 스크립트를 실행하고 싶습니다.

이제 장치 정보가 남았으므로 if 문만 남았습니다.

if(device === "xs"){
  // Enter your script for handheld devices here 
}

다음은 CodePen의 예입니다. http://codepen.io/jacob-king/pen/jWEeWG

한 줄의 자바 스크립트에서 :

var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));

사용자 에이전트에 'Mobi'(MDN 당)가 포함되어 있고 ontouchstart를 사용할 수있는 경우 모바일 장치 일 수 있습니다.

나는 아무도 멋진 사이트를 지적 없음을 놀라게하고있다 : http://detectmobilebrowsers.com/ 이있다 (를 포함하되 이에 국한되지 않음) 이동 감지를위한 다른 언어로 준비 만든 코드 :

• 아파치
• ASP
• 씨#
• IIS
• 자바 스크립트
• NGINX
• PHP
• 펄
• 파이썬
• 울타리

태블릿도 감지해야하는 경우 추가 RegEx 매개 변수에 대해서는 정보 섹션을 확인하십시오.

Android 태블릿, iPad, Kindle Fires 및 PlayBook은 의도적으로 감지되지 않습니다. 태블릿에 대한 지원을 추가하려면 |android|ipad|playbook|silk첫 번째 정규식에 추가하십시오 .

작은 디스플레이에 대해 특별히 걱정하지 않으면 너비 / 높이 감지를 사용할 수 있습니다. 따라서 너비가 특정 크기보다 작 으면 모바일 사이트가 시작됩니다. 완벽한 방법은 아니지만 여러 장치를 감지하는 것이 가장 쉬운 방법 일 것입니다. iPhone 4 용으로 큰 것을 넣어야 할 수도 있습니다 (큰 해상도).

제어 계층을 추가하려면 HTML5 저장소를 사용하여 모바일 저장소 또는 데스크톱 저장소를 사용하고 있는지 감지합니다. 브라우저가 스토리지를 지원하지 않으면 모바일 브라우저 이름 배열이 있으며 사용자 에이전트를 배열의 브라우저와 비교합니다.

꽤 간단합니다. 기능은 다음과 같습니다.

// Used to detect whether the users browser is an mobile browser
function isMobile() {
    ///<summary>Detecting whether the browser is a mobile browser or desktop browser</summary>
    ///<returns>A boolean value indicating whether the browser is a mobile browser or not</returns>

    if (sessionStorage.desktop) // desktop storage 
        return false;
    else if (localStorage.mobile) // mobile storage
        return true;

    // alternative
    mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile','tablet','mobi']; 
    var ua=navigator.userAgent.toLowerCase();
    for (var i in mobile) if (ua.indexOf(mobile[i]) > -1) return true;

    // nothing found.. assume desktop
    return false;
}

확인 만 navigator.userAgent항상 신뢰할 수있는 것은 아닙니다. 또한 확인하여 더 큰 신뢰성을 얻을 수 있습니다 navigator.platform. 이전 답변에 대한 간단한 수정이 더 잘 작동하는 것 같습니다.

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ||
   (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
    // some code...
}

나는 당신이 http://wurfl.io/ 를 확인하는 것이 좋습니다

간단히 말해서 작은 JavaScript 파일을 가져 오는 경우 :

<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을 사용한다고 가정하면) 다음과 같은 작업을 수행 할 수 있습니다.

if(WURFL.is_mobile) {
    //dostuff();
}

이것은 당신이 찾고있는 것입니다.

면책 조항 : 나는이 무료 서비스를 제공하는 회사에서 일합니다.

이 게시물을 확인하십시오. 터치 장치가 감지 될 때 수행 할 작업이나 터치 시작 이벤트가 호출 될 때 수행 할 작업에 대한 훌륭한 코드 스 니펫을 제공합니다.

$(function(){
  if(window.Touch) {
    touch_detect.auto_detected();
  } else {
    document.ontouchstart = touch_detect.surface;
  }
}); // End loaded jQuery
var touch_detect = {
  auto_detected: function(event){
    /* add everything you want to do onLoad here (eg. activating hover controls) */
    alert('this was auto detected');
    activateTouchArea();
  },
  surface: function(event){
    /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */
    alert('this was detected by touching');
    activateTouchArea();
  }
}; // touch_detect
function activateTouchArea(){
  /* make sure our screen doesn't scroll when we move the "touchable area" */
  var element = document.getElementById('element_id');
  element.addEventListener("touchstart", touchStart, false);
}
function touchStart(event) {
  /* modularize preventing the default behavior so we can use it again */
  event.preventDefault();
}

다음은 모바일 브라우저에서 실행 중인지 여부에 대한 참 / 거짓 답변을 얻는 데 사용할 수있는 기능입니다. 예, 브라우저 스니핑이지만 때로는 정확히 필요한 것입니다.

function is_mobile() {
    var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry'];
    for(i in agents) {
        if(navigator.userAgent.match('/'+agents[i]+'/i')) {
            return true;
        }
    }
    return false;
}

모든 답변은 사용자 에이전트를 사용하여 브라우저를 감지하지만 사용자 에이전트를 기반으로 한 장치 감지는 그다지 좋은 해결책이 아닙니다. 터치 장치와 같은 기능을 감지하는 것이 좋습니다 (새로운 jQuery에서는 제거 $.browser하고 $.support대신 사용).

모바일을 감지하려면 터치 이벤트를 확인할 수 있습니다.

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

JavaScript를 사용하여 '터치 스크린'장치를 감지하는 가장 좋은 방법 은 무엇입니까?

장치 유형이 사용되고 있는지 확인하기 위해 다음 문자열 콤보를 사용하는 것이 좋습니다.

당으로 모질라 문서 문자열 Mobi을 권장합니다. 그러나 오래된 태블릿 중 일부는Mobi 사용 사용해야합니다.Tablet 문자열도 합니다.

마찬가지로, 안전한쪽에 iPad있고iPhone 문자열과 같은 장치 유형을 확인하는데 사용될 수있다.

대부분의 새 장치는 문자열 만 반환 true합니다 Mobi.

if (/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)) {
    // do something
}

미디어 쿼리를 사용하여 쉽게 처리 할 수 ​​있습니다.

isMobile = function(){
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");
    return isMobile.matches ? true : false
}

큰 답변 감사합니다. Windows Phone 및 Zune을 지원하기위한 작은 개선 사항 :

if (navigator.userAgent.match(/Android/i) ||
  navigator.userAgent.match(/webOS/i) ||
  navigator.userAgent.match(/iPhone/i) ||
  navigator.userAgent.match(/iPad/i) ||
  navigator.userAgent.match(/iPod/i) ||
  navigator.userAgent.match(/BlackBerry/) ||
  navigator.userAgent.match(/Windows Phone/i) ||
  navigator.userAgent.match(/ZuneWP7/i)
) {
  // some code
  self.location = "top.htm";
}

이것을 사용하십시오 :

/**  * jQuery.browser.mobile (http://detectmobilebrowser.com/)  * jQuery.browser.mobile will be true if the browser is a mobile device  **/ (function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|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|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|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|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);

그런 다음 이것을 사용하십시오 :

if(jQuery.browser.mobile)
{
   console.log('You are using a mobile device!');
}
else
{
   console.log('You are not using a mobile device!');
}

http://detectmobilebrowser.com/ 기반의 간단한 기능

function isMobile() {
    var a = navigator.userAgent||navigator.vendor||window.opera;
    return /(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|phone)|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));
}

<script>
  function checkIsMobile(){
      if(navigator.userAgent.indexOf("Mobile") > 0){
        return true;
      }else{
        return false;
      }
   }
</script>

브라우저로 이동하여 navigator.userAgent를 얻으려고하면 다음과 같은 브라우저 정보가 표시됩니다.

Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit / 537.36 (Gcko와 같은 KHTML) Chrome / 64.0.3282.186 Safari / 537.36

당신이 모바일에서 할 때도 같은 일이 벌어 질 것입니다

Mozilla / 5.0 (Linux; Android 8.1.0; Pixel Build / OPP6.171019.012) AppleWebKit / 537.36 (Gcko와 같은 KHTML) Chrome / 61.0.3163.98 모바일 Safari / 537.36

모든 모바일 브라우저에는 "모바일"이 포함 된 문자열이있는 useragent가 있으므로 코드에서 위의 스 니펫을 사용하여 현재 사용자 에이전트가 웹 / 모바일인지 확인합니다. 결과에 따라 필요한 변경을 수행합니다.

나는 이것을 사용한다

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

어떻게 mobiledetect.net ?

다른 솔루션은 너무 기본적으로 보입니다. 이것은 가벼운 PHP 클래스입니다. 특정 HTTP 헤더와 결합 된 User-Agent 문자열을 사용하여 모바일 환경을 감지합니다. WordPress, Drupal, Joomla, Magento 등의 타사 플러그인을 사용하여 Mobile Detect의 혜택을 누릴 수도 있습니다.

사용자 에이전트 문자열은 단독으로 신뢰할 수 없습니다. 아래 솔루션은 모든 상황에서 작동합니다.

function isMobile(a) {
  return (/(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)));
}

이 함수를 호출하십시오.

isMobile(navigator.userAgent || navigator.vendor || window.opera)