Câu hỏi Cách tốt nhất để phát hiện thiết bị di động trong jQuery là gì?


Có cách nào chắc chắn để phát hiện xem người dùng có đang sử dụng thiết bị di động trong jQuery không? 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 trên thiết bị cầm tay.

JQuery $.browser chức năng không phải là những gì tôi đang tìm kiếm.


1362


gốc


Cung cấp URL dành cho thiết bị di động dành riêng cho thiết bị di động. Đây là cách hầu hết các trang web lớn xử lý các thiết bị di động. Xem m.google.com. - meagar♦
jQuery không, và không thể làm mọi thứ. Nó cung cấp tính năng duyệt và duyệt DOM ngang qua trình duyệt, hoạt ảnh đơn giản và ajax giữa các trình duyệt và tạo khung sườn cho các plugin để xây dựng. Xin lưu ý những hạn chế của jQuery trước khi yêu cầu đặc biệt cho một giải pháp jQuery. - Yi Jiang
Các tác nhân người dùng liên tục di chuyển các mục tiêu, mọi người đọc bài đăng này nên rất cảnh giác với tác nhân người dùng đánh hơi - Rob
Thiết bị 'di động' là gì? Đây có phải là thiết bị hỗ trợ cảm ứng (bao gồm cả máy tính xách tay Chrome Pixels và Windows 8 có chuột) không? Nó là một thiết bị với một màn hình nhỏ (những gì về iPad võng mạc)? Nó là một thiết bị với một CPU chậm? Hoặc một thiết bị có kết nối internet chậm? Tùy thuộc vào những gì bạn muốn làm câu trả lời cho câu hỏi này sẽ thay đổi. Để nhắm mục tiêu độ phân giải màn hình hoặc chạm dễ dàng. Nếu bạn muốn phục vụ nội dung nhỏ hơn hoặc ít JS chuyên sâu hơn cho một số thiết bị, thì không có viên đạn bạc. Kiểm tra window.navigator.connection và quay trở lại (khó chịu, xấu, không được thông báo) userAgent sniffing. 2 xu của tôi. - David Gilbertson
@ Cole "Cole9" Johnson Quan điểm của tôi chính xác. 'Điện thoại di động' dường như được sử dụng như một thuật ngữ ô để chạm, CPU chậm, mạng chậm và màn hình nhỏ. Nhưng không ai trong số này là giả định hoàn hảo. Tôi tin rằng xem xét những cá nhân này sẽ dẫn đến một sản phẩm tốt hơn so với thiết kế cho một số khái niệm mơ hồ của 'điện thoại di động'. Do đó tôi đặt ra câu hỏi đó cho OP. - David Gilbertson


Các câu trả lời:


Thay vì sử dụng jQuery, bạn có thể sử dụng JavaScript đơn giản để phát hiện 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()));

Hiện nay $.browser sẽ trở lại "device" cho tất cả các thiết bị trên

Chú thích: $.browser đã xóa jQuery v1.9.1. Nhưng bạn có thể sử dụng điều này bằng cách sử dụng plugin di trú jQuery Mã số


Một phiên bản toàn diện 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;
}

1737



Người sử dụng đại lý sniffing là một kỹ thuật phát hiện rất noddy, chuỗi tác nhân người dùng là một mục tiêu di chuyển liên tục, họ không nên tin tưởng một mình. Mọi người lên bầu chọn bài đăng này nên cân nhắc nghiên cứu thêm. - Rob
Một trong những vấn đề với sniffing cho các thiết bị cụ thể chỉ ra khỏi các đại lý người dùng là bạn phải nhớ để cập nhật phát hiện của bạn khi thiết bị mới đi ra. Đây không phải là một giải pháp lý tưởng. - ICodeForCoffee
Trình duyệt Dolphin trên Android không gửi bất kỳ chuỗi nào trong số đó! - feeela
Nếu người dùng của bạn đủ xảo quyệt hoặc nhà phát triển câm đủ để thay đổi chuỗi tác nhân người dùng, họ quan tâm đến họ ... - mattdlockyer
Vậy điện thoại di động bạn sẽ xem xét một chiếc TV Android bằng chuột như thế nào? Làm thế nào điện thoại di động là một cửa sổ máy tính có thể chạy ở chế độ kép (với bàn phím, hoặc như màn hình cảm ứng)? Nếu bạn đã làm điều này trước khi iPad được phát minh, sau đó bạn phải thêm nó sau này cho tất cả các trang web của bạn. Các hệ điều hành tiếp theo sắp ra mắt: Ubuntu Mobile, FirefoxOS, Tizen ... .This.Is.A.Bad.Idea. - FrancescoMM


Đối với tôi nhỏ là đẹp vì vậy 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à có trang web "thân thiện với thiết bị di động" của tôi. Vì vậy, tôi sử dụng CSS Media Queries hiển thị / ẩn các phần 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 Facebook Like Box, vì nó tải tất cả những hình ảnh và nội dung đó. Và điều đó không tốt cho khách truy cập trên thiết bị di động. Vì vậy, bên cạnh việc ẩn phần tử container, tôi cũng làm đ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, do đó, nó vẫn không có vẻ như nó nên, như bằng văn bản này.

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. Thay vì sử dụng giải pháp trên, chỉ cần sử dụng những điều sau:

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

    if (isMobile.matches) {
        //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 theo các điều kiện 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 phải thêm bất kỳ phần tử giả nào vào DOM.


411



Bạn không cần # một số yếu tố thực sự trong DOM để làm việc này? - Rimer
-1 The screen.width bất động sản là toàn cầu. Không cần phải tự ý thêm một phần tử vào DOM và không cần thiết mang lại các truy vấn phương tiện CSS. Ngoài ra, nếu trình duyệt trên máy tính để bàn và người dùng định lại kích thước cửa sổ, $is_mobile sẽ không được cập nhật. - merv
Tại sao không: if( screen.width <= 480 ) { // is mobile } - andrewrjones
@andrewrjones Thiết bị võng mạc tăng gấp đôi width giá trị thuộc tính IIRC. Do đó, một chiếc võng mạc iPhone sẽ có một width của 640 và chiều cao của 960 trong bức chân dung và width của 960 và chiều cao của 640 trong cảnh quan. - Cole Johnson
Bạn vừa mới sáng tạo lại window.matchMedia: developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia - Paul Irish


Theo Mozilla - Trình duyệt phát hiện bằng cách sử dụ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 “Mobi” ở bất kỳ đâu 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ẽ khớ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 cả Mozilla, Safari, IE, Opera, Chrome, v.v.

Cập nhật cho Android

EricL khuyến nghị kiểm tra Android với tư cách là tác nhân người dùng, 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):

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

178



Cảm ơn câu trả lời! tôi thích /Mobi/i.test(navigator.userAgent) mặc dù, như kiểm tra() nó trả về một Boolean. - arminrosu
Nghịch lý FireFox Mobile trên Samsung Galaxy Note 8 không trả lại Mobi và kiểm tra sẽ trả về false. - Eirinn
Bài viết được liên kết đề cập đến: Nếu thiết bị đủ lớn không được đánh dấu bằng “Mobi”, bạn nên phục vụ trang web dành cho máy tính để bàn của mình (thực tế là tốt nhất nên hỗ trợ nhập bằng cảm ứng, vì nhiều máy tính để bàn hơn xuất hiện với màn hình cảm ứng). - QuasarDonkey
Điều này tốt hơn nhiều so với các giải pháp được đề xuất khác, nó phải là câu trả lời được chấp nhận i.m.o. - RNobel
Derp. Cảm ơn. Tôi không thể sửa bài viết trước của mình. Lại một lân nưa:/Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) - EricL


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 trở nên quá gần với khái niệm "trình duyệt đánh hơi" IMO. Nó sẽ có khả năng tốt hơn để làm một số tính năng phát hiện. Thư viện như http://www.modernizr.com/ có thể giúp với điều đó.

Ví dụ: đường giữa điện thoại di động và không di động ở đâu? Ngày càng mờ đi mỗi ngày.


74



vẫn còn, người dùng có thể muốn sử dụng "di động jquery" cho các thiết bị đó, bất kể các tính năng được hỗ trợ. - Sirber
Ví dụ, vấn đề của tôi với "di động" "không di động" là tính năng rollover của tôi, tôi đã thiết lập JS để tắt các tính năng, chỉ cần phát hiện - Sam Sussman
Tuy nhiên, nếu bạn muốn cung cấp ứng dụng có thể tải xuống dành riêng cho thiết bị, ứng dụng có thể hữu ích. - Bastes
Nó phụ thuộc vào tình hình, tôi đang tìm một cái gì đó sẽ cho tôi biết nếu người dùng là trên một thiết bị di động, để tôi có thể vô hiệu hóa một số hình ảnh động dựa trên JavaScript nặng. UA đánh hơi sẽ thích hợp hơn nhiều so với việc cố gắng 'phát hiện' các khả năng thực thi JavaScript của trình duyệt của người dùng. - ricksuggs
Thiết bị di động so với không di động là một sự khác biệt rất lớn, chỉ cần sử dụng tính năng "phát hiện tính năng" là ngu ngốc khi bạn đang cố gắng phục vụ tương tác / ui cho trải nghiệm trên thiết bị di động / máy tính để bàn. Cá nhân, tôi ước rằng có một cách dễ dàng (và đáng tin cậy) để có được hệ điều hành mà trình duyệt hiện tại đang chạy - nbsp


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 máy tính xách tay có màn hình cảm ứng. Do đó, 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; }
}

72



Điều gì về máy tính xách tay Windows với màn hình cảm ứng? - Chris Cinelli
Thư hai isMobile chức năng bạn cung cấp trả về true trên thiết bị destop của tôi !! (Google Chrome v44.0) - Luke
Đây là một phương pháp isTouchSupported không thực sự phát hiện di động. - Martin Barker
Không phải tất cả điện thoại di động đều có màn hình cảm ứng. - Andrew
@ LukeP Bạn có làm mới khi đi từ mô phỏng di động đến máy tính để bàn không? - Christian4423


Nó không phải jQuery, nhưng tôi thấy điều này: http://detectmobilebrowser.com/

Nó cung cấp các kịch bản để 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. Đó là tập hợp các thuộc tính để phát hiện khả năng của trình duyệt hiện tại. Tài liệu là ở đâ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 hoàn thành, 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 kịch bản khác với đầu ra bằng cách sử dụ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 khả năng của trình duyệt di động x, việc 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ả điều đó là điểm tranh luận nếu bạn không thể sử dụng ngôn ngữ phía máy chủ :)


59



không hỗ trợ iPad. Để hỗ trợ iPad, hãy tìm ip (hone | od) và "| ad" - ví dụ: ip (hone | od | ad) - Jayson Ragasa
Tôi chỉ cần thử javascript từ detectmobilebrowser.com/, và nó không làm việc cho iPad. - Milche Patern
@MilchePatern đó là bởi vì kịch bản bị lỗi, sử dụng iPad thay vì ipad, sau đó nó hoạt động, tôi đã có vấn đề trên Samsung Tab của tôi, đã phải sử dụng Android iso android :) - Coen Damen
Có một phiên bản jQuery ở đó và nó hoạt động hoàn hảo, nhưng để phát hiện máy tính bảng bạn phải thêm |android|ipad|playbook|silk như được mô tả trong về phần (theo thiết kế) - cprcrack
Vâng, một máy tính bảng không phải là điện thoại di động. Trang web được gọi là dectect di động trình duyệt. - Felix Eve


Đôi khi, bạn muốn biết thiết bị thương hiệu nào mà khách hàng đang sử dụng để hiển thị nội dung cụ thể cho thiết bị đó, như liên kết tới cửa hàng iPhone hoặc thị trường Android. Trình chỉnh sửa là tuyệt vời, nhưng chỉ hiển thị cho bạn khả năng 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 là từ Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/


45



Điều này làm việc tuyệt vời. Tôi cần vô hiệu hóa chức năng jQuery chạy trên cuộn khi sử dụng iPad hoặc điện thoại Android và vì các thiết bị khác nhau có độ rộng màn hình khác nhau, đây là một giải pháp đơn giản. Cảm ơn một tấn. - Eric Allen
Vấn đề duy nhất với việc sử dụng thử nghiệm của Android là những gì về ngóc ngách sử dụng tác nhân người dùng Android - MayorMonty
Câu trả lời hay cho thấy chúng ta không phải là người theo chủ nghĩa cơ bản phát hiện tính năng. - Fernando


Tìm thấy giải pháp trong: 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());
    }
};

Và sau đó để xác minh xem điện thoại di động của mình có phải là thiết bị di động hay không, bạn có thể kiểm tra bằng:

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

39



Một giải pháp dựa trên tác nhân người dùng hoạt động tốt khi bạn có thể tin tưởng chuỗi phụ liên quan trực tiếp đến loại thiết bị. tức là iPad = iPad. Tuy nhiên hiện nay có rất nhiều loại thiết bị khác nhau (trên 25.000) rằng cách tiếp cận này không đủ chính xác cho hầu hết các mục đích kinh doanh. Tôi đã thành lập dự án nguồn mở 51Degrees.com để cung cấp một lựa chọn đáng tin cậy và mạnh mẽ. Nó sẽ hoạt động trong JavaScript và phía máy chủ. Tất cả tài liệu ở đây ... 51degrees.com/support/documentation - James Rosewell
Tôi đã sử dụng ở trên là tốt, và nó đã làm việc tốt cho tôi, nhưng bây giờ nó không làm việc cho Android 5.1 trở lên, có bất cứ điều gì thay đổi trong Android 5.1 và lớn hơn? - Imran Qamer


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 một window.screen.width của 320. Trên Android bạn sẽ kết thúc với một window.outerWidth 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 con số như 768 để chúng có được chế độ xem đầy đủ như bạn muốn.


18



tại sao không phải là 'window.screen.width' đủ? Có vẻ như bạn đang dùng nhỏ hơn 'window.screen.width' hoặc 'window.outerWidth'. Tại sao bạn quan tâm đến 'outerWidth'? Cảm ơn trước cho câu trả lời! - user1330974


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

Tuy nhiên, tôi thích sử dụng kết hợp Modernizr.touch và kiểm tra tác nhân người dùng, chỉ để được 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.touch chức năng ở trên với ('ontouchstart' in document.documentElement)

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

Đồng thời xem câu hỏi SO này


14



Và tương tự trong Dart: TouchEvent.supported. - Kai Sellgren
('ontouchstart' in window) là một thay thế cho Modernizr.touch, quá, hacks.mozilla.org/2013/04/… - JVE999
Tôi nghĩ modernizr là một giải pháp tuyệt vời! - Bobby Russell
Bạn thực sự nên sử dụng RegEx | thay vì nhiều trận đấu. Bạn cũng không cần toLowerCase() bởi vì bạn có i bổ nghĩa. Đây: var isTouchDevice = Modernizr.touch || /iphone|ipod|ipad|android|iemobile|iphone|ipad|ipod|blackberry|bada/i.test(navigator.userAgent); - oriadam


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 phát hiện chiều rộng / chiều cao. Vì vậy, theo cách đó, nếu chiều rộng dưới một kích thước nhất định, trang web trên điện thoại di động được ném lên. Nó có thể không phải là cách hoàn hảo, nhưng nó có lẽ sẽ là dễ nhất để phát hiện 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).


10