사용자가 모바일 브라우저를 가지고 있는지 여부를 부울 값을 반환하는 함수를 찾고 있습니다.
navigator.userAgent정규식을 사용하여 해당 기능을 사용 하고 작성할 수 있지만 사용자 에이전트는 플랫폼마다 너무 다양합니다. 가능한 모든 장치를 일치시키는 것이 쉽지 않을 것이라고 의심하고,이 문제는 여러 번 전에 해결되었으므로 그러한 작업을위한 완벽한 해결책이 있어야한다고 생각합니다.
나는 이 사이트를 보고 있었지만 슬프게도 스크립트는 너무 비밀 스럽기 때문에 스크립트를 내 목적으로 사용하는 방법을 모릅니다. 참 / 거짓을 반환하는 함수를 만드는 것입니다.
답변
detectex 사용 ( 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;
};
원래 답변
단순히 장치 목록을 통해 실행하고 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);
});
}
그러나이 방법이 신뢰할 수 없다고 생각하기 때문에 800×600 이하 의 해상도를 가진 모든 장치가 모바일 장치 라고 가정 하여 대상을 훨씬 더 좁힐 수 있습니다 (요즘 많은 모바일 장치는 이보다 훨씬 높은 해상도를 갖지만)
즉
function detectMob() {
return ( ( window.innerWidth <= 800 ) && ( window.innerHeight <= 600 ) );
}
참고:
답변
어때요?
if (typeof window.orientation !== 'undefined') { ... }… 스마트 폰은 일반적으로이 속성을 지원하므로 데스크톱 브라우저는 지원하지 않습니다.
편집 : @Gajus가 지적 했듯이이 솔루션은 더 이상 사용되지 않으며 사용해서는 안됩니다 ( https://developer.mozilla.org/en-US/docs/Web/API/Window/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);답변
많은 사람들이 언급했듯이, 사용자 에이전트 데이터의 이동 목표에 의존하는 것은 문제가 있습니다. 화면 크기를 계산할 때도 마찬가지입니다.
내 접근 방식은 CSS 기술 에서 빌려 인터페이스가 터치인지 확인합니다.
모든 최신 브라우저에서 지원하는 자바 스크립트 만 사용하여 미디어 쿼리 일치는 장치가 모바일 인지 쉽게 유추 할 수 있습니다 .
function isMobile() {
var match = window.matchMedia || window.msMatchMedia;
if(match) {
var mq = match("(pointer:coarse)");
return mq.matches;
}
return false;
}답변
사용자 에이전트를 사용한 브라우저 감지 에 대한 MDN의 기사에 따르면 가능하면이 방법을 피하고 기능 감지와 같은 다른 방법을 제안하는 것이 좋습니다.
그러나 장치가 모바일인지 감지하는 수단으로 사용자 에이전트를 사용해야하는 경우 다음을 제안합니다.
요약하면, 모바일 장치를 감지하려면 사용자 에이전트의 어느 곳에서나“Mobi”라는 문자열을 찾는 것이 좋습니다.
따라서이 단일 라이너로 충분합니다.
const isMobileDevice = window.navigator.userAgent.toLowerCase().includes("mobi");
[최신 정보]:
주석에서 @ zenw0lf가 제안한 것처럼 정규 표현식을 사용하는 것이 좋습니다.
const isMobileDevice = /Mobi/i.test(window.navigator.userAgent)
