반응형
모바일 브라우저 탐지
모바일 브라우저가 있는지 없는지 부울값을 반환하는 함수를 찾고 있습니다.
는 내가 사용해도 있다.navigator.userAgent하여 이 합니다.regex는 플랫폼마다 다릅니다.가능한 모든 디바이스의 매칭이 쉽지는 않을 것 같고, 이 문제는 이미 여러 번 해결되었기 때문에 어떤 완전한 해결책이 있을 것입니다.
이 사이트를 보고 있었습니다만, 안타깝게도 스크립트가 너무 난해해서, true/false를 반환하는 함수를 만들고 싶다고 생각하고 있습니다.
Regex 사용방법(detectmobilebrowsers.com 참조):
여기 엄청나게 길고 포괄적인 정규식을 사용하는 함수가 있습니다.true ★★★★★★★★★★★★★★★★★」false사용자가 모바일로 브라우징을 하는지 여부에 따라 값이 달라집니다.
window.mobileCheck = function() {
let check = false;
(function(a){if(/(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))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
return check;
};
이 테스트에 태블릿을 포함시키고 싶은 분(단, 사용하지 않는 것이 좋습니다)은 다음 기능을 사용할 수 있습니다.
window.mobileAndTabletCheck = function() {
let check = false;
(function(a){if(/(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|android|ipad|playbook|silk/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))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
return check;
};
navigator.userAgentData 사용
이 경우에도 사용할 수 .navigator.userAgentData.mobileuserAgentData는 아직 실험적이기 때문에 실가동에서는 사용하지 않는 것이 좋습니다.
const isMobile = navigator.userAgentData.mobile; //resolves true/false
원답
이 은, 해, 「」, 「」의 를 확인하는 할 수 .useragent하다
function detectMob() {
const toMatch = [
/Android/i,
/webOS/i,
/iPhone/i,
/iPad/i,
/iPod/i,
/BlackBerry/i,
/Windows Phone/i
];
return toMatch.some((toMatchItem) => {
return navigator.userAgent.match(toMatchItem);
});
}
그러나 이 방법은 신뢰할 수 없기 때문에 해상도가 800x600 이하인 디바이스도 모바일 디바이스라고 가정할 수 있습니다(요즘 많은 모바일 디바이스는 해상도가 이보다 훨씬 높지만).
예
function detectMob() {
return ( ( window.innerWidth <= 800 ) && ( window.innerHeight <= 600 ) );
}
레퍼런스:
그럼 어떻게 해?
if (typeof screen.orientation !== 'undefined') { ... }
스마트폰은 보통 이 속성을 지원하지만 데스크톱 브라우저는 지원하지 않기 때문입니다.MDN을 참조해 주세요.
편집 1: @Gajus가 지적한 바와 같이window.orientation더 이상 사용되지 않으므로 사용할 수 없습니다.
EDIT 2: EXP를 사용할 수 있습니다.screen.orientation되지 않는 ""가 ""window.orientationMDN을 참조해 주세요.
편집 3: window.orientation에서 screen.orientation으로 변경됨
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) || navigator.userAgent.match(/WPDesktop/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
사용방법
if( isMobile.any() ) alert('Mobile');
사용자가 특정 모바일 장치에 있는지 확인하려면 다음 절차를 따릅니다.
if( isMobile.iOS() ) alert('iOS');
참고 자료: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript
github의 확장 버전 : https://github.com/smali-kazmi/detect-mobile-browser
여기 페이스북의 새총 소스에서 나온 간단한 해결책이 있다.
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
/* your code here */
}
모바일 및 태블릿이라고 하는 「터치 스크린 디바이스」를 심플하고 깔끔하게 검출할 수 있는 방법을 찾고 있었습니다.현재 답변에서 올바른 선택을 찾을 수 없었지만 다음 사항을 해결했습니다.이것이 다른 사람에게도 도움이 될 수 있습니다.
var touchDevice = ('ontouchstart' in document.documentElement);
편집: 터치스크린과 모바일을 탑재한 데스크톱을 동시에 지원하려면 다음을 사용합니다.
var touchDevice = (navigator.maxTouchPoints || 'ontouchstart' in document.documentElement);
MDN의 사용자 에이전트를 사용한 브라우저 검출에 관한 기사에 따르면 가능하면 이 접근 방식을 피하고 기능 검출 등의 다른 방법을 제안할 것을 권장합니다.
단, 디바이스가 모바일인지 여부를 검출하기 위한 수단으로 사용자 에이전트를 사용해야 하는 경우에는 다음과 같이 권장합니다.
요약하면 모바일 디바이스를 검출하기 위해 사용자 에이전트 내에서 "Mobi" 문자열을 찾을 것을 권장합니다.
따라서 이 한 줄로 충분합니다.
const isMobileDevice = window.navigator.userAgent.toLowerCase().includes("mobi");
[갱신] :
댓글에서 @zenw0lf가 시사하는 바와 같이 정규 표현을 사용하는 것이 좋습니다.
const isMobileDevice = /Mobi/i.test(window.navigator.userAgent)
많은 사람들이 언급했듯이 사용자 에이전트 데이터의 이동 대상에 의존하는 것은 문제가 있습니다.화면 크기를 세는 것도 마찬가지입니다.
이 접근방식은 인터페이스가 터치인지 아닌지를 판단하기 위해 CSS 기술을 차용한 것입니다.
미디어 쿼리 매치는 javascript(현대 브라우저의 모든 지원)만을 사용하여 기기가 모바일인지 여부를 쉽게 추론할 수 있습니다.
function isMobile() {
var match = window.matchMedia || window.msMatchMedia;
if(match) {
var mq = match("(pointer:coarse)");
return mq.matches;
}
return false;
}
JS 코드가 모바일 브라우저에서 실행되는지 여부를 감지하는 완벽한 솔루션은 없지만, 대부분의 경우 다음 두 가지 옵션이 작동합니다.
옵션 1: 브라우저 스니핑
!function(a){var b=/iPhone/i,c=/iPod/i,d=/iPad/i,e=/(?=.*\bAndroid\b)(?=.*\bMobile\b)/i,f=/Android/i,g=/(?=.*\bAndroid\b)(?=.*\bSD4930UR\b)/i,h=/(?=.*\bAndroid\b)(?=.*\b(?:KFOT|KFTT|KFJWI|KFJWA|KFSOWI|KFTHWI|KFTHWA|KFAPWI|KFAPWA|KFARWI|KFASWI|KFSAWI|KFSAWA)\b)/i,i=/IEMobile/i,j=/(?=.*\bWindows\b)(?=.*\bARM\b)/i,k=/BlackBerry/i,l=/BB10/i,m=/Opera Mini/i,n=/(CriOS|Chrome)(?=.*\bMobile\b)/i,o=/(?=.*\bFirefox\b)(?=.*\bMobile\b)/i,p=new RegExp("(?:Nexus 7|BNTV250|Kindle Fire|Silk|GT-P1000)","i"),q=function(a,b){return a.test(b)},r=function(a){var r=a||navigator.userAgent,s=r.split("[FBAN");return"undefined"!=typeof s[1]&&(r=s[0]),s=r.split("Twitter"),"undefined"!=typeof s[1]&&(r=s[0]),this.apple={phone:q(b,r),ipod:q(c,r),tablet:!q(b,r)&&q(d,r),device:q(b,r)||q(c,r)||q(d,r)},this.amazon={phone:q(g,r),tablet:!q(g,r)&&q(h,r),device:q(g,r)||q(h,r)},this.android={phone:q(g,r)||q(e,r),tablet:!q(g,r)&&!q(e,r)&&(q(h,r)||q(f,r)),device:q(g,r)||q(h,r)||q(e,r)||q(f,r)},this.windows={phone:q(i,r),tablet:q(j,r),device:q(i,r)||q(j,r)},this.other={blackberry:q(k,r),blackberry10:q(l,r),opera:q(m,r),firefox:q(o,r),chrome:q(n,r),device:q(k,r)||q(l,r)||q(m,r)||q(o,r)||q(n,r)},this.seven_inch=q(p,r),this.any=this.apple.device||this.android.device||this.windows.device||this.other.device||this.seven_inch,this.phone=this.apple.phone||this.android.phone||this.windows.phone,this.tablet=this.apple.tablet||this.android.tablet||this.windows.tablet,"undefined"==typeof window?this:void 0},s=function(){var a=new r;return a.Class=r,a};"undefined"!=typeof module&&module.exports&&"undefined"==typeof window?module.exports=r:"undefined"!=typeof module&&module.exports&&"undefined"!=typeof window?module.exports=s():"function"==typeof define&&define.amd?define("isMobile",[],a.isMobile=s()):a.isMobile=s()}(this);
alert(isMobile.any ? 'Mobile' : 'Not mobile');이 특정 브라우저 스니핑 코드는 isMobile이라는 라이브러리의 코드입니다.
옵션 2 : window.orientation
" " " " 가 합니다.window.orientation정의되어 있습니다.
var isMobile = window.orientation > -1;
alert(isMobile ? 'Mobile' : 'Not mobile');메모
모든 터치스크린 장치가 모바일인 것은 아니며 그 반대도 마찬가지입니다.따라서 터치스크린 전용으로 무언가를 구현하려면 브라우저가 모바일 디바이스에서 실행되는지 테스트하지 말고 디바이스가 터치스크린을 지원하는지 테스트해야 합니다.
var hasTouchscreen = 'ontouchstart' in window;
alert(hasTouchscreen ? 'has touchscreen' : 'doesn\'t have touchscreen');여기에서는 비교보다 효율이 뛰어난 userAgent 솔루션을 소개합니다.
function _isMobile(){
// if we want a more complete list use this: http://detectmobilebrowsers.com/
// str.test() is more efficent than str.match()
// remember str.test is case sensitive
var isMobile = (/iphone|ipod|android|ie|blackberry|fennec/).test
(navigator.userAgent.toLowerCase());
return isMobile;
}
기능검출은 사용 중인 디바이스를 파악하는 것보다 훨씬 낫습니다.또한 새로운 디바이스가 항상 출시되는 것을 따라잡기가 매우 어렵습니다.Modernizr와 같은 라이브러리에서는 특정 기능을 사용할 수 있는지 여부를 알 수 있습니다.
제어 레이어를 추가하기 위해 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
var mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile'];
for (var i in mobile) if (navigator.userAgent.toLowerCase().indexOf(mobile[i].toLowerCase()) > 0) return true;
// nothing found.. assume desktop
return false;
}
이런 거 어때요?
if(
(screen.width <= 640) ||
(window.matchMedia &&
window.matchMedia('only screen and (max-width: 640px)').matches
)
){
// Do the mobile thing
}
모바일 또는 태블릿 장치를 감지하는 가장 좋은 방법은 브라우저가 터치 이벤트를 생성할 수 있는지 확인하는 것입니다.
플레인 JavaScript 코드:
function isMobile() {
try{ document.createEvent("TouchEvent"); return true; }
catch(e){ return false; }
}
if (isMobile()) {
# do whatever you wanna do!
}
이것은 매우 효과가 있었지만 터치스크린 디스플레이를 탑재한 노트북 기기에 문제가 있을 수 있습니다.
아직 테스트하지 않았기 때문에 터치스크린 노트북이 모바일 기기로 인식될지 알 수 없습니다.
이 메서드를 window.orrientation으로 사용하지 마십시오!!!
function isMobile() {
return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
};
기능 검출
const isMobile = localStorage.mobile || window.navigator.maxTouchPoints > 1;
IN + 하여 이 스레드 및 을 시도합니다.2022-02-07 Chrome + Safari : :: Crome + Safari : : works works works works works works works works works works 。
localStorage.mobile【크롬】【크롬】사파리있거나 모바일 dev-tools가 있는 .이 글을 쓰는 시점에서는 실제 모바일 브라우저를 트리거하지만 데스크톱은 트리거하지 않습니다.
검토 부탁드립니다.
Win10의 Lenovo X1 요가(키보드 또는 태블릿 모드)에서도 테스트했습니다.
localStorage.mobileundefined일이 있어도- 'CHANGE: 'CHANGE: 'CHANGE:
window.navigator.maxTouchPoints1
→ 은 → isMobile입니다false - 키보드가 뒤로 젖혀지고 노트북이 태블릿 모드일 경우:
window.navigator.maxTouchPoints10
→ 은 → isMobile입니다true
요소가 초점을 맞추면 즉시 흐릿해집니다.Bootstrap-datepicker는 GitHub에서 거의 10,000개의 별을 가진 매우 인기 있고 잘 유지된 컴포넌트이다.이 접근방식은 다음과 같다.
if (window.navigator.maxTouchPoints || 'ontouchstart' in document) {
this.input.blur();
}
https://github.com/uxsolutions/bootstrap-datepicker
도와준 티거에게 감사한다.
여기 그 문제에 대한 나의 재고된 해결책이 있다.아직 완벽하지 않아.유일한 해결책은 장치 제조업체가 "모바일" 및 "태블릿" 사용자-에이전트 문자열을 진지하게 받아들이기 시작하는 것입니다.
window.onload = userAgentDetect;
function userAgentDetect() {
if(window.navigator.userAgent.match(/Mobile/i)
|| window.navigator.userAgent.match(/iPhone/i)
|| window.navigator.userAgent.match(/iPod/i)
|| window.navigator.userAgent.match(/IEMobile/i)
|| window.navigator.userAgent.match(/Windows Phone/i)
|| window.navigator.userAgent.match(/Android/i)
|| window.navigator.userAgent.match(/BlackBerry/i)
|| window.navigator.userAgent.match(/webOS/i)) {
document.body.className += ' mobile';
alert('True - Mobile - ' + navigator.userAgent);
} else {
alert('False - Mobile - ' + navigator.userAgent);
}
if(window.navigator.userAgent.match(/Tablet/i)
|| window.navigator.userAgent.match(/iPad/i)
|| window.navigator.userAgent.match(/Nexus 7/i)
|| window.navigator.userAgent.match(/Nexus 10/i)
|| window.navigator.userAgent.match(/KFAPWI/i)) {
document.body.className -= ' mobile';
document.body.className += ' tablet';
alert('True - Tablet - ' + navigator.userAgent);
} else {
alert('False - Tablet - ' + navigator.userAgent);
}
}
Nexus 7 태블릿에 Android UA 문자열만 있으면 어떻게 됩니까?먼저 모바일이 True가 되고, 이후 Tablet에서도 True가 되지만, Tablet는 본문 태그에서 Mobile UA 문자열을 삭제합니다.
CSS:
body.tablet { background-color: green; }
body.mobile { background-color: red; }
alert개발을 위해 추가된 라인.크롬 콘솔은 많은 휴대용 장치를 에뮬레이트할 수 있습니다.츠미야
편집:
이것을 사용하지 말고 기능검출을 사용하세요.수많은 디바이스와 브랜드가 존재하기 때문에 NEVER 브랜드를 타깃으로 하는 것은 적절한 솔루션이 될 수 없습니다.
사용 사례에 따라 다릅니다.모든 모바일 기기에는 배터리가 필요합니다.배터리를 소모하지 않고 처리 능력을 필요로 하는 경우 Battery Status API를 사용합니다.
navigator.getBattery().then(battery => {
battery.charging ? 'charging' : 'not charging';
});
원하는 것이 presential use인 경우 부울 값을 반환합니다.
if (window.matchMedia("(min-width: 400px)").matches) {
/* the viewport is at least 400 pixels wide */
} else {
/* the viewport is less than 400 pixels wide */
}
또는 태블릿 장치에서 더 나은 사용자 환경을 위해 이들을 결합할 수도 있습니다.
http://wurfl.io/을 확인해 보시기 바랍니다.
한마디로 작은 JS 파일을 Import 하는 경우:
<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.form_factor == "Tablet"){
//dostuff();
}
이것이 당신이 찾고 있는 것입니다.
면책사항:저는 이 무료 서비스를 제공하는 회사에서 일하고 있습니다.감사합니다.
이것은 제가 프로젝트에서 사용하고 있는 es6 포트입니다.여기에는 태블릿도 포함됩니다.
export const isMobile = () => {
const vendor = 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|xda|xiino|android|ipad|playbook|silk/i.test(
vendor
) ||
/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(
vendor.substr(0, 4)
)
);
};
마이클 자포로제트의 덜 난해한 답변이 여기 있다.또한 체크를 사용하여 첫 번째 콜에서만 정규 표현을 작성합니다.정규 표현 배열에서 문자열을 작성하는 데 사용되는 기술에 대해서는 이 답변을 참조하십시오.
var gRE = null;
var gRE4 = null;
function PlatformIsMobile()
{
var e;
if ( gRE == null )
{
e =
[
/(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|android|ipad|playbook|silk/
];
gRE = new RegExp(
e.map( function( r ) { return r.source } ).join( "|" ), "i"
);
}
if ( gRE4 == null )
{
e =
[
/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\-/
];
gRE4 = new RegExp(
e.map( function( r ) { return r.source } ).join( "|" ), "i"
);
}
var key = navigator.userAgent || navigator.vendor || window.opera;
return gRE.test( key ) ||
gRE4.test( key.substr( 0, 4 ) );
}
match Media를 사용하는 IE10+ 솔루션:
const isMobile = () => window.matchMedia('(max-width: 700px)').matches
isMobile()
이렇게 하면 사용자가 어떤 기기를 사용하고 있는지 알 수 있습니다.
if (/ipad|tablet/i.test(navigator.userAgent)) {
console.log("it's a Ipad"); // your code here
}
else if (/mobile/i.test(navigator.userAgent)) {
console.log("it's a Mobile");
} else {
console.log("it's a Desktop");
}
최선은 다음과 같아야 합니다.
var isMobile = (/Mobile/i.test(navigator.userAgent));
하지만 요브 바네아가 말한 것처럼...
// Seem legit
var isMobile = ('DeviceOrientationEvent' in window || 'orientation' in window);
// But with my Chrome on windows, DeviceOrientationEvent == fct()
if (/Windows NT|Macintosh|Mac OS X|Linux/i.test(navigator.userAgent)) isMobile = false;
// My android have "linux" too
if (/Mobile/i.test(navigator.userAgent)) isMobile = true;
이 3가지 테스트를 통해 var is Mobile이...네 알겠습니다
여기 풀기능이 있습니다.
function isMobile(){
return (/(android|bb\d+|meego).+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|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|android|ipad|playbook|silk/i.test(navigator.userAgent||navigator.vendor||window.opera)||/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||navigator.vendor||window.opera).substr(0,4)))
}
jQuery.noConflict();
jQuery(document).ready(function(){
if(isMobile()) alert("Mobile"); else alert("Not Mobile");
});
"timeout.screen"을 사용하면 어떨까요?폭"?
if (window.screen.width < 800) {
// do something
}
또는
if($(window).width() < 800) {
//do something
}
매일 새로운 모바일 기기가 있기 때문에 이것이 가장 좋은 방법인 것 같아!
(구 브라우저에서는 그다지 지원되지 않는 것 같습니다만, 시험해 보세요:)
ECMAScript 6 솔루션 (TypeScript 지원)
public isMobile(): boolean {
let check = false;
((a => {
if (/(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))) check = true;
}))(navigator.userAgent || navigator.vendor);
return check;
}
대부분의 최신 세대의 모바일 디바이스는 600x400 이상의 해상도를 가지고 있습니다.즉, iPhone6...
Proof of Test: 여기서 가장 최근 투표된 투고를 실행.옵션 체크는 다음과 같이 실행됩니다.
(function(a){
window.isMobile = (/(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)))
})(navigator.userAgent||navigator.vendor||window.opera);
alert("This browser was found to be a % browser.", window.isMobile ? 'mobile' : 'desktop');
다음 브라우저 앱에서 다음과 같은 결과가 반환되었습니다.사양: iPhone 6S, iOS 10.3.1.
Safari(최신):모바일로 인식.
크롬(최신):모바일로서 인식되지 않았다.
그 후 Lanti(https://stackoverflow.com/a/31864119/7183483),)의 제안을 테스트했더니 적절한 결과(모든 iOS 디바이스의 경우 모바일, Mac의 경우 데스크톱)가 반환되었습니다.그래서 (모바일과 태블릿 모두) 두 번 뜨기 때문에 조금 편집을 진행했습니다.그 후 iPad로 테스트했을 때, Lanti가 사용하는 파라미터가 OS를 확인하는 것이 가장 중요하기 때문에 모바일로도 반환되는 것을 알 수 있었습니다.그래서 태블릿 IF 문을 모바일 체크 안쪽으로 옮기면 태블릿 체크가 마이너스이고, 그렇지 않으면 태블릿이 마이너스입니다.그 후 모바일 체크가 데스크톱/노트북으로 돌아가기 위해 else 조항을 추가했는데, 둘 다 자격이 있기 때문에 브라우저가 CPU와 OS 브랜드를 인식한다는 것을 알게 되었습니다.그래서 나는 대신 if 스테이트먼트의 일부로 반환되는 것을 추가했다.이를 위해 아무것도 검출되지 않을 경우를 대비해 주의사항 else 스테이트먼트를 추가했습니다.아래를 참조해 주세요.Windows 10 PC에서 곧 테스트로 갱신됩니다.
그리고 디버깅과 일반 컴파일을 쉽게 전환할 수 있도록 'debugMode' 변수도 추가했습니다.
지불거부자:Lanti는 Windows 태블릿에서 테스트되지 않은 것을 전적으로 인정합니다.OS는 순수 Windows이므로 데스크톱/노트북이 반환될 수 있습니다.사용하는 친구를 찾으면 확인하겠습니다.
function userAgentDetect() {
let debugMode = true;
if(window.navigator.userAgent.match(/Mobile/i)
|| window.navigator.userAgent.match(/iPhone/i)
|| window.navigator.userAgent.match(/iPod/i)
|| window.navigator.userAgent.match(/IEMobile/i)
|| window.navigator.userAgent.match(/Windows Phone/i)
|| window.navigator.userAgent.match(/Android/i)
|| window.navigator.userAgent.match(/BlackBerry/i)
|| window.navigator.userAgent.match(/webOS/i)) {
if (window.navigator.userAgent.match(/Tablet/i)
|| window.navigator.userAgent.match(/iPad/i)
|| window.navigator.userAgent.match(/Nexus 7/i)
|| window.navigator.userAgent.match(/Nexus 10/i)
|| window.navigator.userAgent.match(/KFAPWI/i)) {
window.deviceTypeVar = 'tablet';
if (debugMode === true) {
alert('Device is a tablet - ' + navigator.userAgent);
}
} else {
if (debugMode === true) {
alert('Device is a smartphone - ' + navigator.userAgent);
};
window.deviceTypeVar = 'smartphone';
}
} else if (window.navigator.userAgent.match(/Intel Mac/i)) {
if (debugMode === true) {
alert('Device is a desktop or laptop- ' + navigator.userAgent);
}
window.deviceTypeVar = 'desktop_or_laptop';
} else if (window.navigator.userAgent.match(/Nexus 7/i)
|| window.navigator.userAgent.match(/Nexus 10/i)
|| window.navigator.userAgent.match(/KFAPWI/i)) {
window.deviceTypeVar = 'tablet';
if (debugMode === true) {
alert('Device is a tablet - ' + navigator.userAgent);
}
} else {
if (debugMode === true) {
alert('Device is unknown- ' + navigator.userAgent);
}
window.deviceTypeVar = 'Unknown';
}
}
나는 위의 답변이 나에게 효과가 있는 시나리오에 직면했다.그래서 이걸 생각해 냈어요.누군가에게 도움이 될 수도 있어
if(/iPhone|iPad|iPod|Android|webOS|BlackBerry|Windows Phone/i.test(navigator.userAgent)
|| screen.availWidth < 480){
//code for mobile
}
사용 사례에 따라 다릅니다.화면 사용에 중점을 둔다면screen.availWidth또는 를 사용할 수 있습니다.document.body.clientWidth문서를 기준으로 렌더링할 경우 선택합니다.
이게 제가 쓰는 거예요.userAgent의 sniffing이 불쾌하다는 것은 알지만, 제 요구는 예외 중 하나입니다.
<script>
var brow = navigator.userAgent;
if (/mobi/i.test(brow)) {
alert('Mobile Browser');
// Do something for mobile
} else {
alert('Not on Mobile');
// Do something for non mobile
}
</script>
언급URL : https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser
반응형
'source' 카테고리의 다른 글
| PHP에서 HTML 폼 입력 기본값을 올바르게 이스케이프하려면 어떻게 해야 합니까? (0) | 2022.09.18 |
|---|---|
| 잘못된 문자열 오프셋 경고 PHP (0) | 2022.09.18 |
| MySQL 트리거 - 변수에 SELECT 저장 (0) | 2022.09.18 |
| Laravel - 표시할 변수 두 개 이상 전달 (0) | 2022.09.18 |
| {} 또는 새 Object()를 사용하여 JavaScript에서 빈 개체를 생성하시겠습니까? (0) | 2022.09.18 |