복붙노트

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

JQUERY

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

해결법

  1. 1.편집자 주 : 사용자 에이전트 감지는 현대적인 웹 애플리케이션을위한 권장 기술이 아니다. 이 사실의 확인이 답변 아래의 주석을 참조하십시오. 다른 특징 검출을 사용하여 답변 및 / 또는 미디어 쿼리 중 하나를 사용하는 것이 좋습니다.

    편집자 주 : 사용자 에이전트 감지는 현대적인 웹 애플리케이션을위한 권장 기술이 아니다. 이 사실의 확인이 답변 아래의 주석을 참조하십시오. 다른 특징 검출을 사용하여 답변 및 / 또는 미디어 쿼리 중 하나를 사용하는 것이 좋습니다.

    대신에 jQuery를 사용하는 당신은 그것을 감지하는 간단한 자바 스크립트를 사용할 수 있습니다 :

    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는 장치 위의 모든 내용은 "장치"를 반환합니다

    참고 :의 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;
}

  2. 2.나는이 기술을 사용하고, 그래서 나를 위해 작은 아름답다 :

    나는이 기술을 사용하고, 그래서 나를 위해 작은 아름답다 :

    CSS 파일에서 :

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

    jQuery를 / 자바 스크립트 파일에서 :

    $( 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 미디어 쿼리는 화면의 크기에 따라 표시 / 숨기기 요소를 않습니다.

    그것은 그 프로필 이미지와 물건 모두를로드하기 때문에 예를 들어, 내 모바일 버전에서 나는 페이스 북과 같은 상자를 활성화하고 싶지 않아요. 그리고 모바일 방문자를 위해 좋지 않다. 그래서, 컨테이너 요소를 숨기고 외에, 나는 또한 (위) 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에 의해 업데이트

    내장 된 미디어를 검출하는 자바 스크립트 API가있다. 오히려 위의 솔루션을 사용하는 것보다 간단하게 다음을 사용 :

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

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

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

    이 방법의 장점은뿐만 아니라 간단하고 짧은 점입니다,하지만 당신은 조건부로 DOM에있는 더미 요소를 추가 할 필요없이 같은 별도 필요한 경우 스마트 폰과 태블릿 등 다양한 기기를 타겟팅 할 수 있습니다.

  3. 3.모질라에 따르면 - 사용자 에이전트를 사용하여 브라우저 감지 :

    모질라에 따르면 - 사용자 에이전트를 사용하여 브라우저 감지 :

    이 같이 :

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

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

    안드로이드 용 업데이트

    EricL는 "모비"를 포함하지 않는 정제를위한 크롬의 사용자 에이전트 문자열로, 또한 사용자 에이전트로 안드로이드를 테스트하는 것이 좋습니다 (전화 버전은 그러나 할) :

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

  4. 4.간단하고 효과적인 한 줄 :

    간단하고 효과적인 한 줄 :

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

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

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

  5. 5.모바일 장치를 검색하고자 수행하는 작업은 IMO의 개념을 "스니핑 브라우저의"에 너무 가까이 조금을 받고있다. 가능성이 일부 특징 검출을 수행하는 것이 훨씬 더 좋을 것이다. http://www.modernizr.com/ 같은 도서관은 도움이 될 수 있습니다.

    모바일 장치를 검색하고자 수행하는 작업은 IMO의 개념을 "스니핑 브라우저의"에 너무 가까이 조금을 받고있다. 가능성이 일부 특징 검출을 수행하는 것이 훨씬 더 좋을 것이다. http://www.modernizr.com/ 같은 도서관은 도움이 될 수 있습니다.

    예를 들어, 여기서 모바일 및 모바일이 아닌 간의 라인인가? 그것은 점점 더 많은 매일 흐릿한 가져옵니다.

  6. 6.그것은 jQuery를 아니지만, 내가 이걸 발견 : http://detectmobilebrowser.com/

    그것은 jQuery를 아니지만, 내가 이걸 발견 : http://detectmobilebrowser.com/

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

    그러나 jQuery를 사용하고 있기 때문에, 당신은 jQuery.support 모음을 인식 할 수 있습니다. 그것은 현재 브라우저의 기능을 검출하기위한 속성의 모음입니다. 문서는 여기에 있습니다 : http://api.jquery.com/jQuery.support/

    난 당신이 달성하기 위해 노력하고 정확히 알고하지 않기 때문에, 나는 가장 유용이 어떤 모른다.

    존재가 말했다 모두는, 당신의 최선의 방법 중 하나를 리디렉션에 생각하거나 (즉, 옵션 인 경우) 서버 측 언어를 사용하여 출력에 다른 스크립트를 작성합니다. 당신이 정말로 서버 측에서 모바일 브라우저 X의 기능, 검출을 수행하고, 변화의 논리를 알 수 없기 때문에 가장 신뢰할 수있는 방법이 될 것입니다. 당신은 서버 측 언어를 사용할 수없는 경우 물론, 그 모든 논쟁 지점입니다 :)

  7. 7.때때로는 클라이언트가 아이폰 스토어 또는 안드로이드 시장에 대한 링크와 같은 해당 장치에 콘텐츠를 특정를 표시하기 위해 사용되는 브랜드 장치를 알고하는 것이 바람직하다. 모더 나이저은 중대하다,하지만 HTML5 또는 플래시처럼, 당신에게 브라우저 기능을 보여줍니다.

    때때로는 클라이언트가 아이폰 스토어 또는 안드로이드 시장에 대한 링크와 같은 해당 장치에 콘텐츠를 특정를 표시하기 위해 사용되는 브랜드 장치를 알고하는 것이 바람직하다. 모더 나이저은 중대하다,하지만 HTML5 또는 플래시처럼, 당신에게 브라우저 기능을 보여줍니다.

    다음은 각 장치 유형에 대해 다른 클래스를 표시하는 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();
    }
}

    이 솔루션은 그래픽 마니아 출신 http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

  8. 8.http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/ :에 대한 해결책을 찾을.

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

  9. 9."모바일"에 의해 뜻이 "작은 화면을,"나는 이것을 사용 :

    "모바일"에 의해 뜻이 "작은 화면을,"나는 이것을 사용 :

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

    아이폰에 당신은 당신이 480의 window.outerWidth (즉, 안드로이드에 따라 달라질 수 있지만) 될 겁니다 안드로이드에 (320)의 window.screen.width하게 될 겁니다. 그들은 당신이 원하는 것처럼 전체보기를 얻을 것이다, 그래서 아이 패드와 안드로이드 태블릿은 768과 같은 숫자를 반환합니다.

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

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

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

  11. 11.당신이 모더 나이저를 사용하는 경우는 앞서 언급 한 바와 같이 Modernizr.touch를 사용하기 쉽습니다.

    당신이 모더 나이저를 사용하는 경우는 앞서 언급 한 바와 같이 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
    }

    당신이 모더 나이저를 사용하지 않는 경우, 당신은 단순히 (document.documentElement에서 'ontouchstart')와 위의 Modernizr.touch 기능을 대체 할 수

    또한 사용자 에이전트를 테스트하는 iemobile 당신에게 윈도우 폰에 비해 감지 마이크로 소프트 모바일 장치의 넓은 범위를 제공 않습니다.

    또한이 SO 질문을 참조

  12. 12.나는이 질문에 대한 답변을 많이 가지고 알아,하지만 내가 본 것을에서 아무도 대답 나는이 문제를 해결하는 방법과 접근 없습니다.

    나는이 질문에 대한 답변을 많이 가지고 알아,하지만 내가 본 것을에서 아무도 대답 나는이 문제를 해결하는 방법과 접근 없습니다.

    (미디어 쿼리) 폭 CSS의 사용 폭을 기반으로 웹 문서에 적용되는 스타일을 결정합니다. 왜 자바 스크립트에서 폭 사용하지?

    부트 스트랩의 (모바일 우선) 미디어 쿼리의 예를 들어, 4 스냅 / 브레이크 포인트가 존재한다 :

    우리는 또한뿐만 아니라 우리의 자바 스크립트 문제를 해결하기 위해 이것을 사용할 수 있습니다.

    먼저 우리는 창 크기를 얻고 우리의 응용 프로그램을 보는 어떤 크기의 장치를 볼 수 있습니다 값을 반환하는 함수를 작성합니다 :

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

    이제 우리는 기능 설정을 가지고, 우리는 그것을 호출하고 값을 저장할 수 있습니다 :

    var device = getBrowserWidth();

    귀하의 질문이었다

    이제 우리는 장치 정보를 가지고 남아있는 모든은 if 문은 다음과 같습니다

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

    여기 CodePen에 대한 예는 다음과 같습니다 http://codepen.io/jacob-king/pen/jWEeWG

  13. 13.자바 스크립트 한 줄에서 :

    자바 스크립트 한 줄에서 :

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

    사용자 에이전트 (MDN 당) '모비'를 포함 ontouchstart 사용할 경우, 이는 모바일 장치가 될 가능성이있다.

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

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

    당신은뿐만 아니라 정제를 감지해야하는 경우, 단지 추가 정규식 매개 변수에 대한 정보 섹션 확인.

  15. 15.당신은 특히 소형 디스플레이에 대해 걱정하지 않는 경우 당신은 너비 / 높이 감지 기능을 사용할 수 있습니다. 폭이 특정 크기 아래 그런 식으로 그래서 만약, 모바일 사이트까지 발생합니다. 그것은 완벽한 방법이되지 않을 수도 있습니다,하지만 그것은 아마 여러 장치를 감지 할 수있는 가장 쉬운 것입니다. 당신은 아이폰 4 (큰 해상도)에 대해 특정 일에 둘 필요가 있습니다.

    당신은 특히 소형 디스플레이에 대해 걱정하지 않는 경우 당신은 너비 / 높이 감지 기능을 사용할 수 있습니다. 폭이 특정 크기 아래 그런 식으로 그래서 만약, 모바일 사이트까지 발생합니다. 그것은 완벽한 방법이되지 않을 수도 있습니다,하지만 그것은 아마 여러 장치를 감지 할 수있는 가장 쉬운 것입니다. 당신은 아이폰 4 (큰 해상도)에 대해 특정 일에 둘 필요가 있습니다.

  16. 16.발견하는 경우 그 바로 확인 navigator.userAgent 항상 신뢰할 수 없습니다. 큰 신뢰성도 navigator.platform를 검사함으로써 달성 될 수있다. 이전의 대답에 간단한 수정은 잘 작동하는 것 같다 :

    발견하는 경우 그 바로 확인 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...
}

  17. 17.이 모바일 스토리지 또는 데스크탑 스토리지를 사용하는 경우 내가 검출하기 위해 HTML5 스토리지를 사용하여 컨트롤의 추가 레이어를 추가합니다. 브라우저가 스토리지를 지원하지 않는 경우 나 모바일 브라우저 이름의 배열을하고 난 배열의 브라우저와 사용자 에이전트를 비교합니다.

    이 모바일 스토리지 또는 데스크탑 스토리지를 사용하는 경우 내가 검출하기 위해 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;
}

  18. 18.난 당신이 체크 아웃 조언 http://wurfl.io/

    난 당신이 체크 아웃 조언 http://wurfl.io/

    간단히 말해서, 경우에 당신은 작은 자바 스크립트 파일을 가져 :

    <script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

    당신은 외모가 좋아하는 JSON 객체로 남아있을 것입니다 :

    {
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}

    그리고 당신이 좋아하는 일을 할 수있을 것입니다 (의 당신은 물론, 넥서스 7을 사용하는 가정하면) :

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

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

    면책 조항 : 회사 제공하는 무료 서비스에 대한 I 작동합니다.

  19. 19.좋은 답변 감사합니다. 지원 윈도우 전화 및 준에 작은 개선 :

    좋은 답변 감사합니다. 지원 윈도우 전화 및 준에 작은 개선 :

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

  20. 20.이 게시물을 확인, 그것은 touchstart 이벤트가 호출 될 경우 수행 할 터치 장치가 감지되면 어떻게 또는 무엇을해야하는지에 대한 정말 좋은 코드를 제공합니다 :

    이 게시물을 확인, 그것은 touchstart 이벤트가 호출 될 경우 수행 할 터치 장치가 감지되면 어떻게 또는 무엇을해야하는지에 대한 정말 좋은 코드를 제공합니다 :

    $(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();
}

  21. 21.

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

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

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

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

  23. 23.모든 답변은 더 나은 터치 장치 등의 기능을 감지 (새 jQuery를 그들이 $ .browser를 제거하고 대신 .support $ 사용)하는 것입니다, 아주 좋은 해결책이 아닌 사용자 에이전트를 기반으로 브라우저하지만 장치 감지를 감지하는 사용자 에이전트를 사용합니다.

    모든 답변은 더 나은 터치 장치 등의 기능을 감지 (새 jQuery를 그들이 $ .browser를 제거하고 대신 .support $ 사용)하는 것입니다, 아주 좋은 해결책이 아닌 사용자 에이전트를 기반으로 브라우저하지만 장치 감지를 감지하는 사용자 에이전트를 사용합니다.

    당신이 터치 이벤트를 확인할 수 있습니다 모바일 검색하려면 :

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

    자바 스크립트를 사용하여 '터치 스크린'장치를 감지하는 가장 좋은 방법은 무엇에서 촬영?

  24. 24.나는 장치 유형을 사용하고 있는지 확인하는 문자열의 콤보 다음 사용하는 것이 제안 될 것이다.

    나는 장치 유형을 사용하고 있는지 확인하는 문자열의 콤보 다음 사용하는 것이 제안 될 것이다.

    모질라 문서 문자열에 따라 모비 권장합니다. 그러나, 단지 모비 사용하는 경우 기존 정제의 일부는, true를 반환하지 않습니다 따라서 우리는 너무 태블릿 문자열을 사용합니다.

    유사하게, 안전 측면 Ipad과 아이폰 문자열에 존재에도 장치 유형을 확인하는데 사용될 수있다.

    새로운 장치의 대부분은 혼자 모비 문자열에 대해 true를 반환합니다.

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

  25. 25.이 옵션을 사용합니다 :

    이 옵션을 사용합니다 :

    /**  * 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!');
}

  26. 26.http://detectmobilebrowser.com/에 따라 단순 기능

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

  27. 27.

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

    당신이 어떤 브라우저 및 경우에 가면 당신은 navigator.userAgent 그때 우리는 다음과 같이 브라우저 정보 뭔가를 받고있을거야 얻으려고

    모질라 / 5.0 (매킨토시, 인텔 맥 OS X 10_13_1) AppleWebKit / 537.36 (게코 같은 KHTML) 크롬 / 64.0.3282.186 사파리 / 537.36

    같은 일이 당신이 다음을 받고있을거야 모바일에서 할 경우

    모질라 / 5.0 (리눅스, 안드로이드 8.1.0, 픽셀 빌드 / OPP6.171019.012) AppleWebKit / 537.36 (게코 같은 KHTML) 크롬 / 61.0.3163.98 모바일 사파리 / 537.36

    모든 모바일 브라우저는 내가 현재 사용자 에이전트가 웹 / 모바일 있는지 여부를 확인하기 위해 내 코드에 조각 이상 사용하고 그래서 "모바일"를 포함하는 문자열을 사용자 에이전트를해야합니다. 그 결과를 바탕으로 내가 필요한 변경을하고있을 것입니다.

  28. 28.나는 이것을 사용

    나는 이것을 사용

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

  29. 29.어떻게 mobiledetect.net에 대해?

    어떻게 mobiledetect.net에 대해?

    다른 솔루션도 기본 보인다. 이 경량 PHP 클래스입니다. 그것은 모바일 환경을 감지하는 특정 HTTP 헤더와 함께 사용자 에이전트 문자열을 사용합니다. 또한 제 3 자 중 하나를 사용하여 감지 모바일의 혜택을 사용할 수 플러그인 수 등 워드 프레스, 드루팔, 줌라, 마 젠토,

  30. 30.이것은 내가 내 프로젝트에 사용하고 내 코드입니다 :

    이것은 내가 내 프로젝트에 사용하고 내 코드입니다 :

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

    31. from https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery로 자바 스크립트 객체로 변환 폼 데이터  (0) 2020.09.20
[JQUERY] 어떻게 jQuery를 동적 HTML 요소에 이벤트를 연결합니까? [복제]  (0) 2020.09.20
[JQUERY] 어떻게 요소 외부의 클릭을 감지합니까?  (0) 2020.09.20
[JQUERY] 문자열 경로에 의해 중첩 된 자바 스크립트 객체와 배열 액세스  (0) 2020.09.20
[JQUERY] 선택 및 이전 등 :: CSS 의사 요소를 조작하고 :: jQuery를 사용 후  (0) 2020.09.20
,

티스토리툴바