Tôi có thể phát hiện trình duyệt bằng JavaScript không?

Phát hiện di động luôn là một khía cạnh quan trọng của phát triển ứng dụng. Nó phù hợp với cả ứng dụng, cũng như phần mềm và trang web. Có vô số lý do để kiểm tra các tác nhân trình duyệt di động. Quan trọng nhất là khả năng hiển thị trải nghiệm người dùng độc đáo

UAParser. riêng thư viện js đã nhận được hàng triệu lượt tải xuống gói hàng tuần. Và, trong hầu hết các trường hợp, chỉ cần bạn xây dựng thứ gì đó từ đầu là đủ. Nhưng còn những cách khác để phát hiện trình duyệt di động bằng JavaScript thì sao?

Đôi khi bạn có thể chỉ muốn một giải pháp đơn giản thực hiện công việc mà không cần bất kỳ thư viện nào. Và trong bài viết này, tôi sẽ trình bày cho bạn một số kỹ thuật JavaScript để phát hiện người dùng di động. Hãy cho tôi biết nếu tôi bỏ lỡ bất kỳ

hoa tiêu. đại lý người dùng

Chén thánh phát hiện trình duyệt là bộ điều hướng. Thuộc tính UserAgent

if (/Android|iPhone/i.test(navigator.userAgent)) {
  // This checks if the current device is in fact mobile
}

// an alternative structure to check individual matches
if (
  navigator.userAgent.match(/Android/i) ||
  navigator.userAgent.match(/iPhone/i)
) {
  // making individual checks
}

Tất nhiên, đây là một cách rất nguyên thủy để làm việc đó. Nó có thể dễ dàng bị thao túng vì thuộc tính Tác nhân người dùng có thể bị giả mạo. Tuy nhiên, bạn vẫn có thể sử dụng nó trong các dự án khác nhau vì nó thực hiện công việc. e. g. Trang đích hoặc thực hiện chuyển hướng tùy chỉnh đến phiên bản dành cho thiết bị di động

Làm cách nào để hiển thị thông báo cảnh báo nếu người dùng sử dụng trình duyệt không được hỗ trợ hoặc lỗi thời?

Một cách có thể sử dụng thuộc tính này là kiểm tra xem người dùng có đang sử dụng một phiên bản trình duyệt cụ thể hay không và nếu không - hãy thực hiện một hành động

Trong ví dụ này, đó là một thông báo cảnh báo đơn giản

// get the user agent string and extract the browser version
var userAgent = navigator.userAgent;
var browserVersion = userAgent.substring(userAgent.indexOf("Chrome") + 7);

// check if the browser version is less than the minimum supported version
if (parseFloat(browserVersion) < 107) {
  // show a warning message
  alert("Your browser is outdated and not supported. Please upgrade to the latest version.");
}

☰ "+ 7" làm gì?

Trong trường hợp này, số 7 trong chuỗi browserVersion được sử dụng để xác định chỉ mục bắt đầu trích xuất chuỗi con từ chuỗi userAgent. Chuỗi userAgent là một thuộc tính của đối tượng

// get the user agent string and extract the browser version
var userAgent = navigator.userAgent;
var browserVersion = userAgent.substring(userAgent.indexOf("Chrome") + 7);

// check if the browser version is less than the minimum supported version
if (parseFloat(browserVersion) < 107) {
  // show a warning message
  alert("Your browser is outdated and not supported. Please upgrade to the latest version.");
}

1 trong JavaScript chứa thông tin về trình duyệt của người dùng, chẳng hạn như tên và số phiên bản của nó

Trong trường hợp này, mã đang sử dụng phương pháp

// get the user agent string and extract the browser version
var userAgent = navigator.userAgent;
var browserVersion = userAgent.substring(userAgent.indexOf("Chrome") + 7);

// check if the browser version is less than the minimum supported version
if (parseFloat(browserVersion) < 107) {
  // show a warning message
  alert("Your browser is outdated and not supported. Please upgrade to the latest version.");
}

2 để tìm chỉ mục của lần xuất hiện đầu tiên của chuỗi

// get the user agent string and extract the browser version
var userAgent = navigator.userAgent;
var browserVersion = userAgent.substring(userAgent.indexOf("Chrome") + 7);

// check if the browser version is less than the minimum supported version
if (parseFloat(browserVersion) < 107) {
  // show a warning message
  alert("Your browser is outdated and not supported. Please upgrade to the latest version.");
}

3 trong chuỗi userAgent. Phương thức này trả về chỉ mục của ký tự đầu tiên của chuỗi mà nó đang tìm kiếm. Số 7 được thêm vào giá trị này, có nghĩa là quá trình trích xuất chuỗi con sẽ bắt đầu từ ký tự thứ 8 của chuỗi userAgent (vì chỉ mục mảng trong JavaScript bắt đầu từ 0). Điều này cho phép mã bỏ qua bảy ký tự đầu tiên của chuỗi userAgent (i. e. các ký tự "Chrome" cộng với khoảng trắng sau nó) và bắt đầu trích xuất chuỗi con tại ký tự ngay sau khoảng trắng

Làm cách nào để chuyển hướng người dùng đến phiên bản di động của trang web nếu họ đang duyệt từ thiết bị di động?

Để phát hiện các thiết bị di động và phục vụ phiên bản trang web được tối ưu hóa cho thiết bị di động, bạn có thể sử dụng thuộc tính

// get the user agent string and extract the browser version
var userAgent = navigator.userAgent;
var browserVersion = userAgent.substring(userAgent.indexOf("Chrome") + 7);

// check if the browser version is less than the minimum supported version
if (parseFloat(browserVersion) < 107) {
  // show a warning message
  alert("Your browser is outdated and not supported. Please upgrade to the latest version.");
}

7 để kiểm tra các tác nhân người dùng di động phổ biến. Ví dụ

// check for common mobile user agents
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/i) || navigator.userAgent.match(/Windows Phone/i)) {
  // the user is using a mobile device, so redirect to the mobile version of the website
  window.location = "https://www.yoursite.com/mobile";
}

Làm cách nào để sử dụng

// get the user agent string and extract the browser version
var userAgent = navigator.userAgent;
var browserVersion = userAgent.substring(userAgent.indexOf("Chrome") + 7);

// check if the browser version is less than the minimum supported version
if (parseFloat(browserVersion) < 107) {
  // show a warning message
  alert("Your browser is outdated and not supported. Please upgrade to the latest version.");
}

7 để phát hiện loại trình duyệt và hiển thị nội dung dựa trên trình duyệt cụ thể?

Được rồi, vì vậy, có thể có một trường hợp sử dụng duy nhất mà bạn muốn phát hiện một trình duyệt cụ thể, chẳng hạn như Chrome và Firefox (hoặc trong trường hợp này là Android và iPhone), sau đó sử dụng dữ liệu đó để hiển thị nội dung cụ thể. Cách tiếp cận này thường được sử dụng để cung cấp/thay đổi liên kết tải xuống cho các trình duyệt cụ thể

Trong trường hợp như vậy, bạn có thể sử dụng chức năng sau

________số 8_______

 

Bạn có thể nhận xét các câu lệnh

// get the user agent string and extract the browser version
var userAgent = navigator.userAgent;
var browserVersion = userAgent.substring(userAgent.indexOf("Chrome") + 7);

// check if the browser version is less than the minimum supported version
if (parseFloat(browserVersion) < 107) {
  // show a warning message
  alert("Your browser is outdated and not supported. Please upgrade to the latest version.");
}

9 khác nhau cho các trình duyệt mà bạn không muốn kiểm tra và tương tự như vậy - bạn có thể thêm các trình duyệt bổ sung mà bạn muốn kiểm tra

TouchEvent

Một phương pháp để phát hiện người dùng di động là kiểm tra xem thiết bị có màn hình cảm ứng hay không

Sử dụng thuộc tính bạn có thể thực hiện kiểm tra đơn giản để xem cách người dùng tương tác với ứng dụng của bạn. Nếu tương tác đến từ màn hình cảm ứng, thì bạn có thể trả lại phiên bản dành cho thiết bị di động của ứng dụng hoặc trang

if ("ontouchstart" in document.documentElement)
{
  // content for touch-screen (mobile) devices
}
else
{
  // everything else (desktop)
}

Các thiết bị màn hình cảm ứng như Surface không có thuộc tính này. Vì vậy, người dùng đến từ các thiết bị cảm ứng dựa trên máy tính để bàn sẽ vẫn thấy phiên bản dành cho máy tính để bàn của các trang của bạn

Cửa sổ. matchMedia()

Cửa sổ. matchMedia() là một trong những thuộc tính tốt nhất để phát hiện người dùng di động bằng JavaScript. Và nó là như vậy bởi vì nó cho phép bạn tương tác trực tiếp với CSS

Trong nhiều trường hợp, các truy vấn phương tiện tốt hơn vì chúng có các công cụ phát hiện thiết bị di động được tích hợp sẵn. Ví dụ: bạn có thể thực hiện lệnh gọi để kiểm tra xem "con trỏ. thô” là đúng

Tuyên bố cụ thể này xác thực xem con trỏ của thiết bị tốt hay thô

let isMobile = window.matchMedia("(pointer:coarse)").matches;

Ngoài ra, thiết bị có thể có cả con trỏ tốt và thô. Đối với trường hợp sử dụng này, chúng tôi có thể kiểm tra xem có bất kỳ con trỏ nào thô không

let isMobile = window.matchMedia("(any-pointer:coarse)").matches;

Hãy nhớ rằng điều này chỉ xác thực truy vấn là đúng hay sai. Một cách tinh tế hơn để kiểm tra thiết bị di động là sử dụng truy vấn phương tiện trực tiếp

let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;

Truy vấn này sẽ trực tiếp kiểm tra độ rộng tối đa của thiết bị và xác nhận xem nó có phù hợp với tiêu chí hay không. Xin nhắc lại, đây là công việc khá khó khăn để có được tất cả các thiết bị một cách chính xác. Do đó, việc sử dụng thư viện dựng sẵn với tất cả các loại thiết bị đã được xác định sẽ dễ dàng hơn

Hữu ích trong bối cảnh nhất định

Trong những năm qua, đã có nhiều thuộc tính JavaScript để phát hiện các loại thiết bị. Nhiều người trong số họ không được dùng nữa, nhưng hầu hết những người khác đã được tích hợp vào thư viện. Đây cũng là cách tốt nhất để phát hiện thiết bị di động phù hợp

Cuối cùng nhưng không kém phần quan trọng, hầu hết các khung hiện đại đã bao gồm tính năng phát hiện di động như một phần của chính khung đó. Thật đáng để xem xét nếu bạn không muốn làm tất cả các công việc

Thư viện để phát hiện thiết bị di động

Phần này sẽ liệt kê các thư viện JavaScript phổ biến nhất để phát hiện thiết bị di động. Một lần nữa, tôi nhấn mạnh rằng chúng dành riêng cho JavaScript. Tham khảo tài liệu để triển khai đúng cách trong ứng dụng của bạn

---

UAParser. js

Theo như các thư viện hoàn chỉnh, UAParser là tốt nhất hiện có. Với hơn 10 triệu lượt tải xuống hàng tuần chỉ riêng trên npm - UAParser là giải pháp thực tế để phát hiện thiết bị di động. Đúng như tên gọi - thư viện hoạt động bằng cách phân tích chuỗi Tác nhân người dùng

Tuy nhiên, điều làm cho nó trở nên phổ biến là bạn có thể phân tích hàng trăm biến thể của thiết bị. Và, tất cả đều được ghi lại rất tốt. Bạn có thể chuyển từ các nhà cung cấp thiết bị thực tế sang các mẫu phát hiện phức tạp hơn như kiến ​​trúc CPU

Tài liệu GitHub

phát hiện di động. js

Đây là một cổng khá đơn giản của thư viện Mobile Detect cho PHP, được cung cấp cho cộng đồng bởi Heinrich Goebl. Bản thân thư viện sử dụng Tác nhân người dùng để phát hiện, vì vậy như chúng ta đã thảo luận trước đó - không phải là tùy chọn tốt nhất

Tuy nhiên, nó sẽ thực hiện công việc khi nói đến các mẫu HTML thực tế hoặc các dự án danh mục đầu tư

Tài liệu GitHub

isMobile

Ở đây chúng ta có một cách tiếp cận khác đối với thuộc tính User-Agent Navigator từ Kai Mallea. Mặc dù vẫn là một giải pháp đơn giản, nhưng tôi thích điều đó isMobile cung cấp nhiều thông số kỹ thuật. Ví dụ: bạn có thể kiểm tra mọi thiết bị di động hoặc thiết bị cụ thể như điện thoại hoặc máy tính bảng

Tài liệu GitHub

phản ứng-thiết bị-phát hiện

Bạn có phải là người phản ứng không. nhà phát triển js?

Sau đó, thư viện này từ Michael Laktionov là dành cho bạn. Nó hoạt động như bạn mong đợi - đầu tiên thư viện phát hiện loại thiết bị, sau đó hiển thị chế độ xem dựa trên loại đó. Hoạt động hoàn hảo với tích hợp thành phần và có thể được tùy chỉnh thêm thông qua lệnh gọi API

Một sự thật thú vị là số lượng bộ chọn mà thư viện này bao gồm. Nó bao gồm các thiết bị như TV thông minh, thiết bị đeo được, nhiều loại thiết bị iPhone, v.v. Điều này mang đến cho bạn nhiều lựa chọn thiết kế khi xây dựng ứng dụng cho một thiết bị cụ thể

Làm cách nào để phát hiện phiên bản trình duyệt trong JavaScript?

Làm cách nào để phát hiện thiết bị bằng JavaScript?

Làm cách nào để phát hiện trình duyệt trên thiết bị di động hoặc máy tính để bàn trong JavaScript?

Làm cách nào để kiểm tra xem trình duyệt có cạnh trong JavaScript không?