Cách tốt nhất để phát hiện một thiết bị di động là gì?

Có một cách chắc chắn để phát hiện xem người dùng có sử dụng thiết bị di động trong jQuery hay không? Một cái gì đó tương tự như thuộc tính CSS @media? Tôi muốn chạy một tập lệnh khác nếu trình duyệt nằm trên thiết bị cầm tay.

Hàm jQuery $.browserkhông phải là thứ tôi đang tìm kiếm.

Lưu ý của biên tập viên: phát hiện tác nhân người dùng không phải là một kỹ thuật được khuyến nghị cho các ứng dụng web hiện đại. Xem các bình luận bên dưới câu trả lời này để xác nhận thực tế này. Bạn nên sử dụng một trong những câu trả lời khác bằng cách sử dụng tính năng phát hiện và / hoặc truy vấn phương tiện.

Thay vì sử dụng jQuery, bạn có thể sử dụng JavaScript đơn giản để phát hiện ra nó:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

Hoặc bạn có thể kết hợp cả hai để làm cho nó dễ truy cập hơn thông qua jQuery ...

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

Bây giờ $.browsersẽ trở lại "device"cho tất cả các thiết bị trên

Lưu ý: $.browserđã xóa trên jQuery v1.9.1 . Nhưng bạn có thể sử dụng điều này bằng cách sử dụng Mã trình cắm di chuyển jQuery

Một phiên bản kỹ lưỡng hơn:

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

Đối với tôi nhỏ là đẹp nên tôi đang sử dụng kỹ thuật này:

Trong tệp CSS:

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

Trong tệp 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
    }
 });

Mục tiêu của tôi là để trang web của tôi "thân thiện với thiết bị di động". Vì vậy, tôi sử dụng CSS Media Queries để hiển thị / ẩn các yếu tố tùy thuộc vào kích thước màn hình.

Ví dụ: trong phiên bản di động của tôi, tôi không muốn kích hoạt Hộp Like của Facebook, vì nó tải tất cả những hình ảnh và nội dung tiểu sử đó. Và điều đó không tốt cho khách truy cập di động. Vì vậy, ngoài việc ẩn phần tử container, tôi cũng thực hiện điều này bên trong khối mã jQuery (ở trên):

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

Bạn có thể thấy nó hoạt động tại http://lisboaautentica.com

Tôi vẫn đang làm việc trên phiên bản di động, vì vậy nó vẫn không giống như khi viết.

Cập nhật bởi dekin88

Có một API JavaScript được tích hợp để phát hiện phương tiện truyền thông. Thay vì sử dụng giải pháp trên, chỉ cần sử dụng các giải pháp sau:

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

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

Hỗ trợ trình duyệt: http://caniuse.com/#feat=matchmedia

Ưu điểm của phương pháp này là nó không chỉ đơn giản và ngắn hơn, mà bạn có thể nhắm mục tiêu một cách có điều kiện các thiết bị khác nhau như điện thoại thông minh và máy tính bảng nếu cần mà không cần phải thêm bất kỳ yếu tố giả nào vào DOM.

Theo Mozilla - Phát hiện trình duyệt bằng tác nhân người dùng :

Tóm lại, chúng tôi khuyên bạn nên tìm chuỗi Chuỗi Mobi Mobi bất cứ nơi nào trong Tác nhân người dùng để phát hiện thiết bị di động.

Như thế này:

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

Điều này sẽ phù hợp với tất cả các tác nhân người dùng trình duyệt di động phổ biến, bao gồm Mozilla, Safari, IE, Opera, Chrome, v.v.

Cập nhật cho Android

EricL cũng khuyên bạn nên thử nghiệm với Androidtư cách là tác nhân người dùng, vì chuỗi tác nhân người dùng Chrome cho máy tính bảng không bao gồm "Mobi" (tuy nhiên phiên bản điện thoại làm):

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

Một lớp lót đơn giản và hiệu quả:

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

Tuy nhiên, mã trên không tính đến trường hợp cho máy tính xách tay có màn hình cảm ứng. Vì vậy, tôi cung cấp phiên bản thứ hai này, dựa trên giải pháp @Julian :

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

Những gì bạn đang làm bằng cách muốn phát hiện một thiết bị di động đang tiến gần đến một khái niệm "trình duyệt đánh hơi" IMO. Nó có thể sẽ tốt hơn nhiều để làm một số tính năng phát hiện. Các thư viện như http://www.modernizr.com/ có thể giúp với điều đó.

Ví dụ, đâu là ranh giới giữa di động và không di động? Nó càng ngày càng mờ hơn mỗi ngày.

Đó không phải là jQuery, nhưng tôi đã tìm thấy cái này: http://detectmobilebrowser.com/

Nó cung cấp các tập lệnh để phát hiện các trình duyệt di động bằng nhiều ngôn ngữ, một trong số đó là JavaScript. Điều đó có thể giúp bạn với những gì bạn đang tìm kiếm.

Tuy nhiên, vì bạn đang sử dụng jQuery, bạn có thể muốn biết về bộ sưu tập jQuery.support. Đây là một tập hợp các thuộc tính để phát hiện các khả năng của trình duyệt hiện tại. Tài liệu ở đây: http://api.jquery.com/jQuery.support/

Vì tôi không biết chính xác những gì bạn đang cố gắng thực hiện, tôi không biết cái nào trong số này sẽ hữu ích nhất.

Tất cả những gì đang được nói, tôi nghĩ rằng đặt cược tốt nhất của bạn là chuyển hướng hoặc viết một tập lệnh khác đến đầu ra bằng ngôn ngữ phía máy chủ (nếu đó là một tùy chọn). Vì bạn không thực sự biết các khả năng của trình duyệt di động x, thực hiện phát hiện và logic thay đổi ở phía máy chủ sẽ là phương pháp đáng tin cậy nhất. Tất nhiên, tất cả những điều đó là một điểm cần thiết nếu bạn không thể sử dụng ngôn ngữ phía máy chủ :)

Đôi khi, mong muốn biết khách hàng đang sử dụng thiết bị thương hiệu nào để hiển thị nội dung cụ thể cho thiết bị đó, như liên kết đến cửa hàng iPhone hoặc thị trường Android. Modernizer là tuyệt vời, nhưng chỉ cho bạn thấy các khả năng của trình duyệt, như HTML5 hoặc Flash.

Đây là giải pháp UserAgent của tôi trong jQuery để hiển thị một lớp khác nhau cho từng loại thiết bị:

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

Giải pháp này được lấy từ Graphics Maniacs http://gpsonmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

Tìm thấy một giải pháp trong: http://www.abeautitablesite.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());
    }
};

Và sau đó để xác minh xem đó có phải là Di động hay không, bạn có thể kiểm tra bằng cách sử dụng:

if(isMobile.any()) {
   //some code...
}

Nếu bằng "di động", bạn có nghĩa là "màn hình nhỏ", tôi sử dụng điều này:

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

Trên iPhone, bạn sẽ kết thúc với window.screen. Băng thông 320. Trên Android, bạn sẽ kết thúc với một cửa sổ. Đồ trang của 480 (mặc dù điều đó có thể phụ thuộc vào Android). iPad và máy tính bảng Android sẽ trả về các số như 768 để chúng có được chế độ xem đầy đủ như bạn muốn.

Nếu bạn sử dụng Modernizr , nó rất dễ sử dụng Modernizr.touchnhư đã đề cập trước đó.

Tuy nhiên, tôi thích sử dụng kết hợp Modernizr.touchthử nghiệm tác nhân người dùng và để an toàn.

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
    }

Nếu bạn không sử dụng Modernizr, bạn chỉ cần thay thế Modernizr.touchchức năng trên bằng('ontouchstart' in document.documentElement)

Cũng lưu ý rằng việc kiểm tra tác nhân người dùng iemobilesẽ cung cấp cho bạn phạm vi rộng hơn của các thiết bị di động Microsoft được phát hiện hơn Windows Phone.

Cũng xem câu hỏi SO này

Bạn không thể dựa vào navigator.userAgent, không phải mọi thiết bị đều tiết lộ HĐH thực sự của nó. Trên HTC của tôi chẳng hạn, nó phụ thuộc vào cài đặt ("sử dụng phiên bản di động" bật / tắt). Trên http://my.clockodo.com , chúng tôi chỉ đơn giản được sử dụng screen.widthđể phát hiện các thiết bị nhỏ. Thật không may, trong một số phiên bản Android có lỗi với screen. Thong. Bạn có thể kết hợp theo cách này với 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");
}

Tôi biết câu hỏi này có rất nhiều câu trả lời, nhưng từ những gì tôi thấy không ai tiếp cận câu trả lời theo cách tôi sẽ giải quyết vấn đề này.

CSS sử dụng chiều rộng (Truy vấn phương tiện) để xác định kiểu nào được áp dụng cho tài liệu web dựa trên chiều rộng. Tại sao không sử dụng chiều rộng trong JavaScript?

Ví dụ: trong Truy vấn phương tiện (Đầu tiên trên thiết bị di động) của Bootstrap, tồn tại 4 điểm snap / break:

• Các thiết bị cực nhỏ là 768 pixel trở xuống.
• Thiết bị nhỏ có phạm vi từ 768 đến 991 pixel.
• Thiết bị trung bình có phạm vi từ 992 đến 1199 pixel.
• Thiết bị lớn có 1200 pixel trở lên.

Chúng tôi cũng có thể sử dụng điều này để giải quyết vấn đề JavaScript của mình.

Đầu tiên chúng ta sẽ tạo một hàm lấy kích thước cửa sổ và trả về một giá trị cho phép chúng ta xem thiết bị có kích thước nào đang xem ứng dụng của chúng ta:

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

Bây giờ chúng ta đã thiết lập chức năng, chúng ta có thể gọi nó là lưu trữ giá trị:

var device = getBrowserWidth();

Câu hỏi của bạn là

Tôi muốn chạy một tập lệnh khác nếu trình duyệt nằm trên thiết bị cầm tay.

Bây giờ chúng ta có thông tin thiết bị, tất cả những gì còn lại là một câu lệnh if:

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

Dưới đây là một ví dụ về CodePen: http://codepen.io/jacob-king/pen/jweeWG

Trong một dòng javascript:

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

Nếu tác nhân người dùng chứa 'Mobi' (theo MDN) và ontouchstart khả dụng thì có khả năng đó là một thiết bị di động.

Tôi ngạc nhiên khi không ai chỉ ra một trang web đẹp: http://detectmobilebrowsers.com/ Nó đã sẵn sàng tạo mã bằng các ngôn ngữ khác nhau để phát hiện trên thiết bị di động (bao gồm nhưng không giới hạn):

• Apache
• ASP
• C #
• IIS
• JavaScript
• NGINX
• PHP
• Perl
• Con trăn
• Đường ray

Và nếu bạn cũng cần phát hiện các máy tính bảng, chỉ cần kiểm tra phần Giới thiệu để biết thêm thông số RegEx.

Máy tính bảng Android, iPad, Kindle Fire và PlayBooks không được phát hiện theo thiết kế. Để thêm hỗ trợ cho máy tính bảng, hãy thêm |android|ipad|playbook|silkvào regex đầu tiên.

Nếu bạn không đặc biệt lo lắng về màn hình nhỏ, bạn có thể sử dụng tính năng phát hiện chiều rộng / chiều cao. Vì vậy, nếu chiều rộng dưới một kích thước nhất định, trang web di động sẽ bị ném lên. Nó có thể không phải là cách hoàn hảo, nhưng nó có thể sẽ dễ dàng phát hiện nhất cho nhiều thiết bị. Bạn có thể cần phải đặt một cái cụ thể cho iPhone 4 (độ phân giải lớn).

Để thêm một lớp điều khiển bổ sung, tôi sử dụng bộ lưu trữ HTML5 để phát hiện xem nó đang sử dụng bộ nhớ di động hay bộ nhớ máy tính để bàn. Nếu trình duyệt không hỗ trợ lưu trữ, tôi có một mảng tên trình duyệt di động và tôi so sánh tác nhân người dùng với các trình duyệt trong mảng.

Nó khá đơn giản. Đây là chức năng:

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

Nếu thấy rằng chỉ cần kiểm tra navigator.userAgentkhông phải lúc nào cũng đáng tin cậy. Độ tin cậy cao hơn có thể đạt được bằng cách kiểm tra navigator.platform. Một sửa đổi đơn giản cho câu trả lời trước dường như hoạt động tốt hơn:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ||
   (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
    // some code...
}

Tôi khuyên bạn nên kiểm tra http://wurfl.io/

Tóm lại, nếu bạn nhập một tệp JavaScript nhỏ:

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

Bạn sẽ bị bỏ lại với một đối tượng JSON trông giống như:

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

(Tất nhiên, giả sử bạn đang sử dụng Nexus 7) và bạn sẽ có thể thực hiện những việc như:

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

Đây là những gì bạn đang tìm kiếm.

Tuyên bố miễn trừ trách nhiệm: Tôi làm việc cho công ty cung cấp dịch vụ miễn phí này.

Kiểm tra bài đăng này , nó cung cấp một đoạn mã thực sự hay để biết phải làm gì khi thiết bị cảm ứng được phát hiện hoặc phải làm gì nếu sự kiện touchstart được gọi:

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

Đây là một chức năng bạn có thể sử dụng để có câu trả lời đúng / sai về việc bạn có đang chạy trên trình duyệt di động hay không. Vâng, đó là trình duyệt đánh hơi, nhưng đôi khi đó chính xác là những gì bạn cần.

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

Tất cả các câu trả lời đều sử dụng tác nhân người dùng để phát hiện trình duyệt nhưng phát hiện thiết bị dựa trên tác nhân người dùng không phải là giải pháp tốt, tốt hơn là phát hiện các tính năng như thiết bị cảm ứng (trong jQuery mới họ loại bỏ $.browservà sử dụng $.supportthay thế).

Để phát hiện điện thoại di động, bạn có thể kiểm tra các sự kiện chạm:

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

Lấy từ cách tốt nhất để phát hiện thiết bị 'màn hình cảm ứng' bằng JavaScript?

Tôi sẽ đề nghị sử dụng kết hợp các chuỗi sau đây, để kiểm tra xem loại thiết bị có được sử dụng không.

Theo chuỗi tài liệu MozillaMobi được khuyến nghị. Nhưng, một số máy tính bảng cũ không trả về true nếu chỉ Mobiđược sử dụng, do đó chúng ta cũng nên sử dụng Tabletchuỗi.

Tương tự, để ở bên an toàn iPadvà iPhonechuỗi cũng có thể được sử dụng để kiểm tra loại thiết bị.

Hầu hết các thiết bị mới sẽ trở lại truecho Mobichuỗi một mình.

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

Bạn có thể sử dụng truy vấn phương tiện để có thể xử lý dễ dàng.

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

Câu trả lời tuyệt vời cảm ơn. Cải tiến nhỏ để hỗ trợ Windows phone và 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";
}

Dùng cái này:

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

Sau đó sử dụng:

if(jQuery.browser.mobile)
{
   console.log('You are using a mobile device!');
}
else
{
   console.log('You are not using a mobile device!');
}

Chức năng đơn giản dựa trên 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));
}

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

Nếu bạn chọn bất kỳ trình duyệt nào và nếu bạn cố gắng lấy navigator.userAgent thì chúng tôi sẽ nhận được thông tin trình duyệt giống như sau

Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit / 537.36 (KHTML, như tắc kè) Chrome / 64.0.3282.186 Safari / 537.36

Điều tương tự nếu bạn làm trong điện thoại di động, bạn sẽ nhận được theo dõi

Mozilla / 5.0 (Linux; Android 8.1.0; Pixel Build / OPP6.171019.012) AppleWebKit / 537.36 (KHTML, như Gecko) Chrome / 61.0.3163.98 Mobile Safari / 537.36

Mọi trình duyệt trên thiết bị di động sẽ có người dùng với chuỗi chứa "Di động" Vì vậy, tôi đang sử dụng đoạn mã trên trong mã của mình để kiểm tra xem tác nhân người dùng hiện tại có phải là web / di động hay không. Dựa trên kết quả tôi sẽ thực hiện các thay đổi cần thiết.

Tôi dùng cái này

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

Làm thế nào về mobiledetect.net ?

Các giải pháp khác có vẻ quá cơ bản. Đây là một lớp PHP nhẹ. Nó sử dụng chuỗi User-Agent kết hợp với các tiêu đề HTTP cụ thể để phát hiện môi trường di động. Bạn cũng có thể hưởng lợi từ Phát hiện di động bằng cách sử dụng bất kỳ plugin nào của bên thứ 3 có sẵn cho: WordPress, Drupal, Joomla, Magento, v.v.

Chuỗi tác nhân người dùng không nên được tin cậy một mình. Giải pháp dưới đây sẽ hoạt động trong mọi tình huống.

function isMobile(a) {
  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/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)));
}

và gọi chức năng này:

isMobile(navigator.userAgent || navigator.vendor || window.opera)