jQuery에서 사용자가 모바일 장치를 사용하는지 여부를 감지하는 방법이 있습니까? @media 속성과 유사한 것이 있습니까? 브라우저가 휴대용 장치에 있는 경우 다른 스크립트를 실행하고 싶습니다.
jQuery $.browser 함수는 내가 찾고 있는 것이 아닙니다.
반응형
질문자 :Community Wiki
편집자 주: 사용자 에이전트 감지는 최신 웹 앱에 권장되는 기술이 아닙니다. 이 사실을 확인하려면 이 답변 아래의 주석을 참조하십시오. 기능 감지 및/또는 미디어 쿼리를 사용하여 다른 답변 중 하나를 사용하는 것이 좋습니다.
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"
참고: $.browser 는 jQuery v1.9.1에서 제거되었습니다. 그러나 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|\-[aw])|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; }Community Wiki
나에게는 작은 것이 아름답기 때문에 이 기술을 사용하고 있습니다.
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 좋아요 상자를 활성화하고 싶지 않습니다. 모든 프로필 이미지와 항목을 로드하기 때문입니다. 모바일 방문자에게는 좋지 않습니다. 따라서 컨테이너 요소를 숨기는 것 외에도 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에 더미 요소를 추가하지 않고도 필요한 경우 스마트폰 및 태블릿과 같은 다른 장치를 조건부로 개별적으로 타겟팅할 수 있다는 것입니다.
Community Wiki
Mozilla에 따르면 - 사용자 에이전트를 사용한 브라우저 감지 :
요약하면, 모바일 장치를 감지하기 위해 사용자 에이전트의 아무 곳에서나 "Mobi" 문자열을 찾는 것이 좋습니다.
이와 같이:
if (/Mobi/.test(navigator.userAgent)) { // mobile! }이것은 모바일 Mozilla, Safari, IE, Opera, Chrome 등을 포함한 모든 일반적인 모바일 브라우저 사용자 에이전트와 일치합니다.
안드로이드용 업데이트
EricL은 태블릿용 Chrome 사용자 에이전트 문자열 에 "Mobi"가 포함되어 있지 않기 Android 사용자 에이전트도 테스트할 것을 권장합니다(전화 버전에는 포함).
if (/Mobi|Android/i.test(navigator.userAgent)) { // mobile! }Community Wiki
간단하고 효과적인 한 줄:
function isMobile() { return ('ontouchstart' in document.documentElement); }그러나 위의 코드는 터치스크린이 있는 랩톱의 경우를 고려하지 않습니다. 따라서 @Julian 솔루션을 기반으로 이 두 번째 버전을 제공합니다.
function isMobile() { try{ document.createEvent("TouchEvent"); return true; } catch(e){ return false; } }Community Wiki
jQuery는 아니지만 이것을 찾았습니다. http://detectmobilebrowser.com/
여러 언어로 모바일 브라우저를 감지하는 스크립트를 제공하며 그 중 하나는 JavaScript입니다. 그것은 당신이 찾고있는 것에 도움이 될 수 있습니다.
그러나 jQuery를 사용하고 있으므로 jQuery.support 컬렉션에 대해 알고 싶을 수 있습니다. 현재 브라우저의 기능을 감지하기 위한 속성 모음입니다. 문서는 다음과 같습니다. http://api.jquery.com/jQuery.support/
나는 당신이 성취하려는 것이 정확히 무엇인지 모르기 때문에 이 중 어느 것이 가장 유용할지 모르겠습니다.
즉, 최선의 방법은 서버 측 언어(옵션인 경우)를 사용하여 출력에 다른 스크립트를 리디렉션하거나 작성하는 것입니다. 모바일 브라우저 x의 기능을 잘 모르기 때문에 서버 측에서 탐지 및 변경 로직을 수행하는 것이 가장 안정적인 방법일 것입니다. 물론 서버 측 언어를 사용할 수 없다면 그 모든 것이 무의미합니다. :)
Community Wiki
때때로 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/에서 가져온 것입니다.
Community Wiki
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... }Community Wiki
"모바일"이 "작은 화면"을 의미하는 경우 다음을 사용합니다.
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과 같은 숫자를 반환하므로 원하는 대로 전체 보기를 얻을 수 있습니다.
Community Wiki
navigator.userAgent 의존할 수 없으며 모든 장치가 실제 OS를 드러내는 것은 아닙니다. 예를 들어 내 HTC에서는 설정("모바일 버전 사용" 켜기/끄기)에 따라 다릅니다. http://my.clockodo.com 에서는 단순히 screen.width 를 사용하여 작은 장치를 감지했습니다. 불행히도 일부 Android 버전에는 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"); }Community Wiki
자바스크립트 한 줄에서:
var isMobile = ('ontouchstart' in document.documentElement && /mobi/i.test(navigator.userAgent));사용자 에이전트에 'Mobi'(MDN 기준)가 포함되어 있고 ontouchstart를 사용할 수 있는 경우 모바일 장치일 가능성이 높습니다.
편집: 주석의 피드백에 대한 응답으로 정규식 코드를 업데이트합니다. regex /mobi/i i를 사용하면 대소문자를 구분하지 않으며 mobi는 모든 모바일 브라우저와 일치합니다. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox 참조
Community Wiki
Modernizr 을 사용한다면 앞서 언급한 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 Windows Phone 보다 감지된 Microsoft 모바일 장치의 범위가 더 넓어집니다.
Community Wiki
나는 이 질문에 많은 답이 있다는 것을 알고 있지만, 내가 본 것에서 아무도 내가 이것을 풀 수 있는 방식으로 답에 접근하지 않습니다.
CSS는 너비(미디어 쿼리)를 사용하여 너비를 기반으로 웹 문서에 적용할 스타일을 결정합니다. JavaScript에서 너비를 사용하지 않는 이유는 무엇입니까?
예를 들어 Bootstrap의 (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" } };이제 함수가 설정되었으므로 값을 저장하기 위해 호출할 수 있습니다.
var device = getBrowserWidth();귀하의 질문은
브라우저가 휴대용 장치에 있는 경우 다른 스크립트를 실행하고 싶습니다.
이제 장치 정보가 있으므로 if 문만 남습니다.
if(device === "xs"){ // Enter your script for handheld devices here }다음은 CodePen의 예입니다. http://codepen.io/jacob-king/pen/jWEeWG
Community Wiki
아무도 좋은 사이트를 지적하지 않았다는 사실에 놀랐습니다. http://detectmobilebrowsers.com/ 모바일 감지를 위해 다양한 언어로 코드를 준비했습니다(이에 국한되지 않음):
- 아파치
- ASP
- 씨#
- IIS
- 자바스크립트
- NGINX
- PHP
- 펄
- 파이썬
- 울타리
태블릿도 감지해야 하는 경우 추가 RegEx 매개변수에 대한 정보 섹션을 확인하십시오.
Android 태블릿, iPad, Kindle Fire 및 PlayBook은 의도적으로 감지되지 않습니다. 태블릿 지원을 추가하려면
|android|ipad|playbook|silk를 첫 번째 정규식에 추가하세요.
Community Wiki
작은 디스플레이가 특별히 걱정되지 않는 경우 너비/높이 감지를 사용할 수 있습니다. 따라서 너비가 특정 크기보다 작 으면 모바일 사이트가 튀어 나옵니다. 완벽한 방법은 아니지만 여러 장치에서 가장 쉽게 감지할 수 있습니다. iPhone 4(고해상도)용으로 특정 항목을 넣어야 할 수도 있습니다.
Community Wiki
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... }Community Wiki
제어 계층을 추가하기 위해 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; }Community Wiki
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(); }이것은 당신이 찾고있는 것입니다.
면책 조항: 저는 이 무료 서비스를 제공하는 회사에서 일합니다.
Community Wiki
좋은 답변 감사합니다. 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"; }Community Wiki
미디어 쿼리를 사용하면 쉽게 처리할 수 있습니다.
isMobile = function(){ var isMobile = window.matchMedia("only screen and (max-width: 760px)"); return isMobile.matches ? true : false }Community Wiki
이 게시물을 확인하십시오. 터치 장치가 감지되었을 때 수행할 작업 또는 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(); }Community Wiki
다음은 모바일 브라우저에서 실행 중인지 여부에 대한 참/거짓 답변을 얻는 데 사용할 수 있는 기능입니다. 예, 브라우저 스니핑이지만 때로는 이것이 정확히 필요한 것입니다.
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; }Community Wiki
모든 답변은 브라우저를 감지하기 위해 사용자 에이전트를 사용하지만 사용자 에이전트를 기반으로 하는 장치 감지는 그다지 좋은 솔루션이 아닙니다. 터치 장치와 같은 기능을 감지하는 것이 더 좋습니다(새 jQuery에서는 $.browser 를 제거하고 $.support 를 사용함).
모바일을 감지하려면 터치 이벤트를 확인할 수 있습니다.
function is_touch_device() { return 'ontouchstart' in window // works on most browsers || 'onmsgesturechange' in window; // works on ie10 }Community Wiki
장치 유형이 사용 중인지 확인하기 위해 다음과 같은 문자열 조합을 사용하는 것이 좋습니다.
Mozilla 문서 문자열에 따라 Mobi 가 권장됩니다. Mobi 만 사용하는 경우 true를 반환하지 않으므로 Tablet 문자열도 사용해야 합니다.
마찬가지로, 안전을 위해 iPad 및 iPhone 문자열을 사용하여 장치 유형을 확인할 수도 있습니다.
대부분의 새 장치는 Mobi 문자열에 대해서만 true 를 반환합니다.
if (/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)) { // do something }Community Wiki
나는 이 오래된 질문을 알고 있고 많은 답변이 있지만 이 기능은 간단하고 모든 모바일, 태블릿 및 컴퓨터 브라우저를 감지하는 데 도움이 될 것이며 매력처럼 작동합니다.
function Device_Type() { var Return_Device; if(/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android|iemobile|w3c|acs\-|alav|alca|amoi|audi|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd\-|dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg\-c|lg\-d|lg\-g|lge\-|maui|maxo|midp|mits|mmef|mobi|mot\-|moto|mwbp|nec\-|newt|noki|palm|pana|pant|phil|play|port|prox|qwap|sage|sams|sany|sch\-|sec\-|send|seri|sgh\-|shar|sie\-|siem|smal|smar|sony|sph\-|symb|t\-mo|teli|tim\-|tosh|tsm\-|upg1|upsi|vk\-v|voda|wap\-|wapa|wapi|wapp|wapr|webc|winw|winw|xda|xda\-) /i.test(navigator.userAgent)) { if(/(tablet|ipad|playbook)|(android(?!.*(mobi|opera mini)))/i.test(navigator.userAgent)) { Return_Device = 'Tablet'; } else { Return_Device = 'Mobile'; } } else if(/(tablet|ipad|playbook)|(android(?!.*(mobi|opera mini)))/i.test(navigator.userAgent)) { Return_Device = 'Tablet'; } else { Return_Device = 'Desktop'; } return Return_Device; }Community Wiki
이것을 사용하십시오:
/** * 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\/|\-[aw])|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!'); }Community Wiki
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|\-[aw])|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)); }Community Wiki
<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(Gecko와 같은 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(Gecko와 같은 KHTML) Chrome/61.0.3163.98 Mobile Safari/537.36
모든 모바일 브라우저에는 "Mobile"이 포함된 문자열이 있는 useragent가 있으므로 현재 사용자 에이전트가 웹/모바일인지 확인하기 위해 코드에서 위의 스니펫을 사용하고 있습니다. 결과에 따라 필요한 변경 작업을 수행합니다.
Community Wiki
나는 이것을 사용한다
if(navigator.userAgent.search("mobile")>0 ){ do something here }Community Wiki
mobiledetect.net은 어떻습니까?
다른 솔루션은 너무 기본적인 것 같습니다. 이것은 가벼운 PHP 클래스입니다. 특정 HTTP 헤더와 결합된 User-Agent 문자열을 사용하여 모바일 환경을 감지합니다. WordPress, Drupal, Joomla, Magento 등에 사용할 수 있는 타사 플러그인을 사용하여 Mobile Detect의 이점을 누릴 수도 있습니다.
Community Wiki
이것은 내 프로젝트에서 사용하는 코드입니다.
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; } }Community Wiki
출처 : http:www.stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device
반응형
'etc. > StackOverFlow' 카테고리의 다른 글
| 'div' 컨테이너에 맞게 이미지 크기를 자동으로 조정하려면 어떻게 해야 합니까? (0) | 2021.12.28 |
|---|---|
| Chrome에서 동일한 출처 정책 비활성화 (0) | 2021.12.28 |
| 하위 디렉토리를 별도의 Git 저장소로 분리(이동) (0) | 2021.12.28 |
| Bower와 npm의 차이점은 무엇입니까? (0) | 2021.12.28 |
| JavaScript에서 'new' 키워드는 무엇입니까? (0) | 2021.12.28 |