JavaScript로 모바일 장치를 감지하는 방법은 무엇입니까?
JavaScript 코드를 사용하여 모바일 장치 (iPhone / iPad / Android) 감지를 시뮬레이션하기 위해 실제 HTML 페이지 / JavaScript를 생성 요청을 요청합니다. 그러면 사용자는 이메일 주소를 다른 화면으로 이동합니다.
이 답변이 3 년 늦게 사용할 수있는 것이 뭐라고 100 % 정확한 답변은 없습니다 . 사용자가 모든 형태의 모바일 장치 (Android, iOS, BlackBerry, Windows Phone, Kindle 등)에 어느 것이 있는지 다음 코드를 사용할 수 있습니다.
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
// Take the user to a different screen here.
}
요청하는 브라우저 사용자 에이전트 패키지를 감지 한 다음 모바일 브라우저에서 오는지 아닌지에 따라 결정합니다. 이 장치는 완벽하지 않을 사용자 에이전트가 모바일 장치 용으로 발생하지 않습니다 (적어도 제가 아는 것입니다).
이 사이트는 코드 작성에 도움이됩니다. http://www.hand-interactive.com/resources/detect-mobile-javascript.htm
예 :
다음을 수행하여 javascript에서 사용자 에이전트를 사용할 수 있습니다.
var uagent = navigator.userAgent.toLowerCase();
그런 다음 확인을 이와 동일한 형식으로 수행하십시오 (단지 iPhone을 예로 사용하지만 다른 것들은 약간 다를가 있음).
function DetectIphone()
{
if (uagent.search("iphone") > -1)
alert('true');
else
alert('false');
}
편집하다
다음과 같이 간단한 HTML 페이지를 만듭니다.
<html>
<head>
<title>Mobile Detection</title>
</head>
<body>
<input type="button" OnClick="DetectIphone()" value="Am I an Iphone?" />
</body>
</html>
<script>
function DetectIphone()
{
var uagent = navigator.userAgent.toLowerCase();
if (uagent.search("iphone") > -1)
alert('true');
else
alert('false');
}
</script>
매우 간단한 해결은 화면 너비를 확인하는 것입니다. 거의 모든 모바일의 최대 화면 너비가 480px (현재) 매우 안정적입니다.
if( screen.width <= 480 ) {
location.href = '/mobile.html';
}
사용자 에이전트는 어디에서나 볼 수 있습니다. 그러나 약간 이상한 장치가 사용자 에이전트에있어 응답하지 않는 것이 좋습니다. 이전 솔루션이 여전히 더 좋습니다.
여기에서 유일한 예외는 ipad와 같은 태블릿 PC입니다. 플랫폼이 더 높으며 아마도 사용자 에이전트를 사용할 것입니다.
if(navigator.userAgent.match(/iPad/i)){
//code for iPad here
}
if(navigator.userAgent.match(/iPhone/i)){
//code for iPhone here
}
if(navigator.userAgent.match(/Android/i)){
//code for Android here
}
if(navigator.userAgent.match(/BlackBerry/i)){
//code for BlackBerry here
}
if(navigator.userAgent.match(/webOS/i)){
//code for webOS here
}
var isMobileDevice = navigator.userAgent.match(/iPad|iPhone|iPod/i) != null
|| screen.width <= 480;
간단한 해결책은 CSS 전용입니다. 스타일 시트에서 스타일을 한 다음 하단에서 사용할 수 있습니다. 최신 스마트 폰은 너비가 480px에 불고기 한 것처럼 실제로는 훨씬 더 넓습니다. CSS에서 더 작은 화면을 감지하는 코드는 다음과 사용할 수 있습니다.
@media handheld, only screen and (max-width: 560px), only screen and (max-device-width: 480px) {
#hoofdcollumn {margin: 10px 5%; width:90%}
}
도움이 되셨기를 바랍니다!
현재 2015 년 이후 로이 질문을 우연히 발견 했어요 window.matchMedia 를 만나 할 것입니다 (그리고 2015 년이면 이전 브라우저를위한 polyfilling ).
if (matchMedia('handheld').matches) {
//...
} else {
//...
}
나는 사용한다 mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
그래서 이렇게했습니다. 모두 감사합니다!
<head>
<script type="text/javascript">
function DetectTheThing()
{
var uagent = navigator.userAgent.toLowerCase();
if (uagent.search("iphone") > -1 || uagent.search("ipad") > -1
|| uagent.search("android") > -1 || uagent.search("blackberry") > -1
|| uagent.search("webos") > -1)
window.location.href ="otherindex.html";
}
</script>
</head>
<body onload="DetectTheThing()">
VIEW NORMAL SITE
</body>
</html>
사용자 에이전트를 사용하여이를 감지 할 수 있습니다.
var useragent = navigator.userAgent.toLowerCase();
if( useragent.search("iphone") )
; // iphone
else if( useragent.search("ipod") )
; // ipod
else if( useragent.search("android") )
; // android
etc
http://www.useragentstring.com/pages/useragentstring.php 에서 useragent 문자열을 사용할 수 있습니다 .
http://wurfl.io/ 를 확인하는 것이 좋습니다.
간단히 말해서, 작은 JS 파일을 가져 오는 경우 :
<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을 사용하고 가정합니다.) 다음과 같은 작업을 수행 할 수 있습니다.
WURFL.complete_device_name
이것이 당신이 찾고있는 것입니다.
면책 조항 : 저는이 무료 서비스를 제공하는 회사에서 일합니다. 감사합니다.
웹 페이지가 데스크톱 또는 모바일 앱에로드 확인하는 방법의 예입니다.
JS는 페이지로드시 실행 및 페이지로드시 데스크톱 특정 작업 (예 : 바코드 스캐너 애플리케이션)을 수행 할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
/*
* Hide Scan button if Page is loaded in Desktop Browser
*/
function hideScanButtonForDesktop() {
if (!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent))) {
// Hide scan button for Desktop
document.getElementById('btnLinkModelScan').style.display = "none";
}
}
//toggle scanButton for Desktop on page load
window.onload = hideScanButtonForDesktop;
</script>
</head>
시뮬레이션해야하는 장치에 대한 사용자 에이전트를 확인한 다음 이에 대해 변수를 테스트합니다.
예를 들면 :
// var userAgent = navigator.userAgent.toLowerCase(); // this would actually get the user agent
var userAgent = "iphone"; /* Simulates User Agent for iPhone */
if (userAgent.indexOf('iphone') != -1) {
// some code here
}
이것은 위 버전과 매우 추천 내 버전 참조 용으로 좋습니다.
if (mob_url == "") {
lt_url = desk_url;
} else if ((useragent.indexOf("iPhone") != -1 || useragent.indexOf("Android") != -1 || useragent.indexOf("Blackberry") != -1 || useragent.indexOf("Mobile") != -1) && useragent.indexOf("iPad") == -1 && mob_url != "") {
lt_url = mob_url;
} else {
lt_url = desk_url;
}
사용자 에이전트를 기반으로 한 장치 감지는 그다지 좋은 솔루션이있는 터치 장치 사용합니다와 같은 기능을 감지하는 것이 좋습니다 (새 jQuery $.browser에서는 $.support대신 제거 하고 좋습니다).
모바일을 감지 광고 터치 이벤트를 확인할 수 있습니다.
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| 'onmsgesturechange' in window; // works on ie10
}
JavaScript를 사용하여 '터치 스크린'장치를 감지하는 가장 좋은 방법 은 무엇입니까?
DeviceDetection을 사용하기 만하면됩니다.
deviceDetection.deviceType // phone | tablet according to device
또 다른 가능성은 mobile-detect.js 를 사용하는 것 입니다. 데모를 보십시오 .
브라우저 사용 :
<script src="mobile-detect.js"></script>
<script>
var md = new MobileDetect(window.navigator.userAgent);
// ... see below
</script>
Node.js / Express :
var MobileDetect = require('mobile-detect'),
md = new MobileDetect(req.headers['user-agent']);
// ... see below
예:
var md = new MobileDetect(
'Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i' +
' Build/4.1.A.0.562) AppleWebKit/534.30 (KHTML, like Gecko)' +
' Version/4.0 Mobile Safari/534.30');
// more typically we would instantiate with 'window.navigator.userAgent'
// as user-agent; this string literal is only for better understanding
console.log( md.mobile() ); // 'Sony'
console.log( md.phone() ); // 'Sony'
console.log( md.tablet() ); // null
console.log( md.userAgent() ); // 'Safari'
console.log( md.os() ); // 'AndroidOS'
console.log( md.is('iPhone') ); // false
console.log( md.is('bot') ); // false
console.log( md.version('Webkit') ); // 534.3
console.log( md.versionStr('Build') ); // '4.1.A.0.562'
console.log( md.match('playstation|xbox') ); // false
내가 (성공하지 못한) 내 해킹에 대한 적절한 솔루션을 찾았 기 때문에 여기에 해킹을 추가하고 싶습니다. 모바일과 데스크톱 사이에서 가장 중요한 차이 인 기기 방향 지원을 확인하기 만하면됩니다.
var is_handheld = 0; // 전역 if (window.DeviceOrientationEvent) {is_handheld = 1;}
즉, imho a page는 모바일 / 데스크톱 레이아웃간에 수동 선택을 제공해야합니다. 1920 * 1080을 얻었고 확대 할 수 있습니다. 지나치게 단순화되고 기능이 감소 된 워드 프레소 이드 덩어리가 항상 좋은 것은 아닙니다. 특히 작동하지 않는 장치 감지를 기반으로 레이아웃 강제-항상 발생합니다.
사용자 에이전트 테스트는 복잡하고 지저분하며 항상 실패합니다. 또한 "휴대용"미디어 매치가 저에게 효과가 있다는 것도 알지 못했습니다. 가장 간단한 해결책은 마우스를 사용할 수 있는지 감지하는 것입니다. 그리고 다음과 같이 할 수 있습니다.
var result = window.matchMedia("(any-pointer:coarse)").matches;
마우스 오버 항목을 표시해야하는지 여부와 물리적 포인터가 필요한 다른 항목을 표시해야하는지 여부를 알려줍니다. 그런 다음 너비를 기준으로 추가 미디어 쿼리에서 크기를 조정할 수 있습니다.
다음의 작은 라이브러리는 위 쿼리의 벨트 중괄호 버전으로, 대부분의 "마우스가없는 태블릿 또는 휴대 전화입니까"시나리오를 다루어야합니다.
https://patrickhlauke.github.io/touch/touchscreen-detection/
미디어 매치는 2015 년부터 지원되었으며 여기에서 호환성을 확인할 수 있습니다 : https://caniuse.com/#search=matchMedia
간단히 말해 화면이 터치 스크린인지 여부와 화면 크기와 관련된 변수를 유지해야합니다. 이론적으로는 마우스로 작동하는 데스크탑에 작은 화면을 가질 수 있습니다.
위의 여러 답변과 유사합니다. 이 간단한 기능은 저에게 매우 잘 작동합니다. 2019 년 현재
function IsMobileCard()
{
var 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;
}
참고 URL : https://stackoverflow.com/questions/6666907/how-to-detect-a-mobile-device-with-javascript
'ProgramingTip' 카테고리의 다른 글
| MySQL에서 다른 테이블과 일치하는 테이블을 만드시겠습니까? (0) | 2020.10.23 |
|---|---|
| JavaScript를 사용하여 AngularJS Bootstrap UI에서 모달 창 호출 (0) | 2020.10.23 |
| Django QuerySet의 개수 대 len (0) | 2020.10.23 |
| 휴식을 사용하여 Java에서 루프를 종료하는 것이 나쁜 습관입니까? (0) | 2020.10.23 |
| 장고 템플릿에서 쿼리 필터링을 수행하는 방법 (0) | 2020.10.23 |