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

Cầ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 dành riêng cho thiết bị đó, chẳng hạn như liên kết đến cửa hàng iPhone hoặc thị trường Android. Nó chỉ hiển thị các khả năng của trình duyệt, như HTML5 hoặc Flash

Bạn có thể chỉ cần sử dụng phương pháp JavaScript window.matchMedia[] để phát hiện thiết bị di động dựa trên truy vấn phương tiện CSS. Đây là cách tốt nhất và đáng tin cậy nhất để phát hiện thiết bị di động

Ví dụ sau sẽ cho bạn thấy phương pháp này thực sự hoạt động như thế nào

Phương pháp matchMedia[] được hỗ trợ trong tất cả các trình duyệt hiện đại chính như Chrome, Firefox, Internet Explorer [phiên bản 10 trở lên], v.v.

Chào mừng bạn đến với hướng dẫn về cách phát hiện thiết bị di động bằng Javascript. Vì vậy, bạn có một số tính năng trên trang web của mình mà bạn chỉ muốn cung cấp cho người dùng di động?

Một trong những cách dễ nhất để phát hiện thiết bị di động trong Javascript là kiểm tra xem từ “mobile” có tồn tại trong tác nhân người dùng HTTP không – if [navigator.userAgent.toLowerCase[].match[/mobile/i]] { IS MOBILE DEVICE }

Điều đó bao gồm những điều cơ bản, nhưng chúng ta hãy xem qua một vài ví dụ khác trong hướng dẫn này – Đọc tiếp

ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào

 

 

TRANG TRÌNH BÀY NHANH

Tải xuống & Ghi chú Phát hiện di động Bit và liên kết hữu ích Kết thúc

 

TẢI XUỐNG & LƯU Ý

Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa

 

GHI CHÚ NHANH

Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình

 

MÃ VÍ DỤ TẢI XUỐNG

Nhấp vào đây để tải xuống mã nguồn, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên mã nguồn hoặc sử dụng nó trong dự án của riêng bạn

 

 

PHÁT HIỆN DI ĐỘNG JAVASCRIPT

Được rồi, bây giờ chúng ta hãy đi vào các ví dụ về phát hiện thiết bị di động trong Javascript

 

1] PHÁT HIỆN ĐƠN GIẢN VỚI TÁC NHÂN NGƯỜI DÙNG

1-phát hiện. html

window.addEventListener["load", [] => {
  // [A] CHECK FOR MOBILE
  var isMobile = navigator.userAgent.toLowerCase[].match[/mobile/i];
 
  // [B] DO SOMETHING...
  if [isMobile] { console.log["Is mobile device"]; }
  else { console.log["Not mobile device"]; }
}];

Như trong phần giới thiệu ở trên, cách dễ nhất để phát hiện thiết bị di động là tìm từ “mobile” trong tác nhân người dùng. Dành cho các bạn chưa biết tác nhân người dùng là gì, nó chỉ đơn giản là một đoạn dữ liệu tiêu đề nhỏ mà trình duyệt gửi đến máy chủ – Nó chứa nhiều thông tin khác nhau về tên trình duyệt, hệ điều hành, phiên bản và nền tảng

 

2] PHÁT HIỆN TÁC NHÂN NGƯỜI DÙNG TỐT HƠN

2-dò-thêm. html

window.addEventListener["load", [] => {
  // [A] BREAK USER AGENT DOWN
  var isMobile = navigator.userAgent.toLowerCase[].match[/mobile/i],
      isTablet = navigator.userAgent.toLowerCase[].match[/tablet/i],
      isAndroid = navigator.userAgent.toLowerCase[].match[/android/i],
      isiPhone = navigator.userAgent.toLowerCase[].match[/iphone/i],
      isiPad = navigator.userAgent.toLowerCase[].match[/ipad/i];
 
  // [B] DETECTED DEVICE TYPE
  console.log["Mobile", isMobile];
  console.log["Tablet", isTablet];
  console.log["Android", isAndroid];
  console.log["iPhone", isiPhone];
  console.log["iPad", isiPad];
}];

Có, chúng tôi có thể thực hiện nhiều “kiểm tra chi tiết” hơn trên tác nhân người dùng – Thậm chí có thể xác định xem người dùng có phải là Android/iOS/Windows/Mac hay không

 

 

3] SỬ DỤNG THƯ VIỆN PHÁT HIỆN

3-mobile-dò. html

 


window.addEventListener["load", [] => {
  var md = new MobileDetect[window.navigator.userAgent];
  console.log[ md.mobile[] ]; // null if not mobile device
  console.log[ md.phone[] ]; // null if not smartphone
  console.log[ md.tablet[] ]; // null if not tablet
  console.log[ md.userAgent[] ]; // Browser used. Chrome, Firefox, Dolfin, etc...
  console.log[ md.os[] ]; // Android, iOS, Windwows, OSX, or Linux
  console.log[ md.version['Webkit'] ]; // Webkit version
  console.log[ md.versionStr['Build'] ]; // Build
}];

Cuối cùng, nếu bạn thực sự cần đi sâu vào “cấp độ quản lý vi mô” của phát hiện di động – tôi khuyên bạn nên sử dụng thư viện để thay thế. Có khá nhiều thứ mà bạn có thể sử dụng, nhưng đây là một trong những tùy chọn phổ biến hơn, Mobile Detect Library – Documentation

 

 

BIT & LIÊN KẾT HỮU ÍCH

Đó là tất cả cho dự án này và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn

 

GIỚI HẠN & THAY THẾ

Xin lưu ý rằng tác nhân người dùng không chính xác 100%, người dùng có thể dễ dàng thay đổi hoặc ẩn tác nhân người dùng bằng tiện ích mở rộng của trình duyệt. cách tốt hơn là thiết kế đáp ứng phù hợp và sử dụng tính năng phát hiện. Ví dụ: nếu ứng dụng của bạn yêu cầu GPS, hãy kiểm tra xem Geolocation API có được hỗ trợ trong trình duyệt của người dùng không. Thư viện phát hiện tính năng mà tôi khuyên dùng là Modernizr .

 

LIÊN KẾT và THAM KHẢO

• Tác nhân người dùng HTTP trên MDN
• Nếu bạn quan tâm, bạn cũng có thể xem tác nhân người dùng của riêng mình tại whatismybrowser. com
• Dưới đây là các ví dụ khác về cách các tác nhân người dùng di động trông như thế nào
  • Tác nhân người dùng Android
  • tác nhân người dùng iOS

 

BẢNG CHEAT INFOGRAPHIC

Cảm ơn bạn đã đọc, và chúng tôi đã đi đến phần cuối của hướng dẫn ngắn này. Tôi hy vọng rằng nó đã giúp bạn với dự án của bạn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc

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

Cách sử dụng JavaScript phát hiện di động?

JavaScript nào được sử dụng để phát hiện trình duyệt?

Website phát hiện di động như thế nào?