Javascript kiểm tra xem trình duyệt là ie hay chrome

Cân nhắc trước khi sử dụng tính năng phát hiện trình duyệt

Khi xem xét sử dụng chuỗi tác nhân người dùng để phát hiện trình duyệt nào đang được sử dụng, bước đầu tiên của bạn là cố gắng tránh nó nếu có thể. Bắt đầu bằng cách cố gắng xác định lý do tại sao bạn muốn làm điều đó

Tìm hoặc hỏi trong các diễn đàn chuyên ngành. bạn không phải là người đầu tiên gặp phải vấn đề này. Ngoài ra, các chuyên gia hoặc những người có quan điểm khác có thể cung cấp cho bạn các ý tưởng để khắc phục lỗi. Nếu sự cố có vẻ không phổ biến, bạn nên kiểm tra xem lỗi này đã được báo cáo cho nhà cung cấp trình duyệt thông qua hệ thống theo dõi lỗi của họ chưa (Mozilla; WebKit; Blink; Opera). Các nhà sản xuất trình duyệt chú ý đến các báo cáo lỗi và phân tích có thể gợi ý về các cách giải quyết lỗi khác

Trang web của bạn cần sử dụng một tính năng Web cụ thể mà một số trình duyệt chưa hỗ trợ và bạn muốn đưa những người dùng đó đến một trang Web cũ hơn với ít tính năng hơn nhưng bạn biết rằng nó sẽ hoạt động. Đây là lý do tồi tệ nhất để sử dụng phát hiện tác nhân người dùng vì tỷ lệ cược cuối cùng là tất cả các trình duyệt khác sẽ bắt kịp. Ngoài ra, việc kiểm tra mọi trình duyệt ít phổ biến hơn và kiểm tra các tính năng Web đó là không thực tế. Bạn không bao giờ nên đánh hơi tác nhân người dùng. Thay vào đó, luôn có cách khác là thực hiện phát hiện tính năng

Đây thường là một cách làm không tốt, nhưng có một số trường hợp điều này là cần thiết. Trong những trường hợp này, trước tiên bạn nên phân tích tình huống của mình để chắc chắn rằng điều đó thực sự cần thiết. Bạn có thể ngăn chặn nó bằng cách thêm một số yếu tố

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

Tránh phát hiện tác nhân người dùng

Nếu bạn muốn tránh sử dụng phát hiện tác nhân người dùng, bạn có các tùy chọn

Phát hiện tính năng là khi bạn không cố gắng tìm ra trình duyệt nào đang hiển thị trang của mình mà thay vào đó, bạn kiểm tra xem tính năng cụ thể mà bạn cần có khả dụng hay không. Nếu không, bạn sử dụng dự phòng. Trong những trường hợp hiếm hoi khi hành vi khác nhau giữa các trình duyệt, thay vì kiểm tra chuỗi tác nhân người dùng, thay vào đó, bạn nên triển khai thử nghiệm để phát hiện cách trình duyệt triển khai API và xác định cách sử dụng nó từ đó. Một ví dụ về phát hiện tính năng như sau. Vào năm 2017, hỗ trợ giao diện thử nghiệm chưa được gắn cờ của Chrome trong các biểu thức thông thường, nhưng không có trình duyệt nào khác hỗ trợ nó. Vì vậy, bạn có thể đã nghĩ để làm điều này

// This code snippet splits a string in a special notation
let splitUpString;
if (navigator.userAgent.includes("Chrome")) {
  // YES! The user is suspected to support look-behind regexps
  // DO NOT USE /(?<=[A-Z])/. It will cause a syntax error in
  // browsers that do not support look-behind expressions
  // because all browsers parse the entire script, including
  // sections of the code that are never executed.
  const camelCaseExpression = new RegExp("(?<=[A-Z])");
  splitUpString = (str) => String(str).split(camelCaseExpression);
} else {
  // This fallback code is much less performant, but works
  splitUpString = (str) => str.replace(/[A-Z]/g, "z$1").split(/z(?=[A-Z])/g);
}

console.log(splitUpString("fooBare")); // ["fooB", "are"]
console.log(splitUpString("jQWhy")); // ["jQ", "W", "hy"]

Đoạn mã trên sẽ đưa ra một số giả định không chính xác. Đầu tiên, giả định rằng tất cả các chuỗi tác nhân người dùng bao gồm chuỗi con "Chrome" đều là Chrome. Chuỗi UA nổi tiếng là gây hiểu nhầm. Sau đó, giả định rằng tính năng tìm kiếm sẽ luôn khả dụng nếu trình duyệt là Chrome. Tác nhân có thể là phiên bản Chrome cũ hơn, từ trước khi hỗ trợ được thêm vào hoặc (vì tính năng này đang được thử nghiệm vào thời điểm đó) nên có thể là phiên bản Chrome mới hơn đã loại bỏ tác nhân đó. Quan trọng nhất, nó cho rằng không có trình duyệt nào khác hỗ trợ tính năng này. Hỗ trợ có thể đã được thêm vào các trình duyệt khác bất cứ lúc nào, nhưng mã này sẽ tiếp tục chọn con đường kém hơn

Thay vào đó, có thể tránh được các sự cố như thế này bằng cách kiểm tra sự hỗ trợ của chính tính năng đó

________số 8

Như đoạn mã trên chứng minh, luôn có cách để kiểm tra hỗ trợ trình duyệt mà không cần tác nhân người dùng đánh hơi. Không bao giờ có bất kỳ lý do gì để kiểm tra chuỗi tác nhân người dùng cho việc này

Cuối cùng, các đoạn mã trên gây ra một vấn đề nghiêm trọng với mã hóa trên nhiều trình duyệt luôn phải được tính đến. Không vô tình sử dụng API mà bạn đang thử nghiệm trong các trình duyệt không được hỗ trợ. Điều này nghe có vẻ hiển nhiên và đơn giản, nhưng đôi khi không phải vậy. Ví dụ: trong đoạn mã trên, việc sử dụng lookbehind trong ký hiệu biểu thức chính quy ngắn (ví dụ: /reg/igm) sẽ gây ra lỗi trình phân tích cú pháp trong các trình duyệt không được hỗ trợ. Vì vậy, trong ví dụ trên, bạn sẽ sử dụng new RegExp("(?<=look_behind_stuff)");

Kỹ thuật thiết kế này liên quan đến việc phát triển trang Web của bạn theo 'lớp', sử dụng cách tiếp cận từ dưới lên, bắt đầu với lớp đơn giản hơn và cải thiện khả năng của trang web trong các lớp liên tiếp, mỗi lớp sử dụng nhiều tính năng hơn

Đây là cách tiếp cận từ trên xuống, trong đó bạn xây dựng trang web tốt nhất có thể bằng cách sử dụng tất cả các tính năng bạn muốn, sau đó tinh chỉnh nó để làm cho nó hoạt động trên các trình duyệt cũ hơn. Điều này có thể khó thực hiện và kém hiệu quả hơn so với tăng cường lũy ​​tiến, nhưng có thể hữu ích trong một số trường hợp

Có thể cho rằng việc sử dụng phổ biến nhất và lạm dụng việc đánh hơi tác nhân người dùng là để phát hiện xem thiết bị có phải là thiết bị di động hay không. Tuy nhiên, mọi người thường bỏ qua những gì họ thực sự theo đuổi. Mọi người sử dụng tác nhân người dùng đánh hơi để phát hiện xem thiết bị của người dùng có thân thiện với cảm ứng và có màn hình nhỏ hay không để họ có thể tối ưu hóa trang web của mình cho phù hợp. Mặc dù việc đánh hơi tác nhân người dùng đôi khi có thể phát hiện ra những điều này, nhưng không phải tất cả các thiết bị đều giống nhau. một số thiết bị di động có kích thước màn hình lớn, một số máy tính để bàn có màn hình cảm ứng nhỏ, một số người sử dụng TV thông minh, đây hoàn toàn là một trò chơi bóng hoàn toàn khác và một số người có thể tự động thay đổi chiều rộng và chiều cao của màn hình bằng cách lật máy tính bảng của họ sang một bên. Vì vậy, đánh hơi tác nhân người dùng chắc chắn không phải là cách để đi. Rất may, có nhiều lựa chọn thay thế tốt hơn. Sử dụng Bộ điều hướng. maxTouchPoints để phát hiện xem thiết bị của người dùng có màn hình cảm ứng hay không. Sau đó, mặc định quay lại kiểm tra màn hình tác nhân người dùng chỉ khi (. ("maxTouchPoints" trong bộ điều hướng)) { /*Mã tại đây*/}. Sử dụng thông tin này để biết thiết bị có màn hình cảm ứng hay không, không thay đổi toàn bộ bố cục của trang web chỉ dành cho thiết bị cảm ứng. bạn sẽ chỉ tạo thêm công việc và bảo trì cho chính mình. Thay vào đó, hãy thêm các tiện ích liên lạc như các nút lớn hơn, dễ bấm hơn (bạn có thể làm điều này bằng cách sử dụng CSS bằng cách tăng kích thước phông chữ). Dưới đây là một ví dụ về mã tăng phần đệm của #exampleButton lên 1em trên thiết bị di động

let hasTouchScreen = false;
if ("maxTouchPoints" in navigator) {
  hasTouchScreen = navigator.maxTouchPoints > 0;
} else if ("msMaxTouchPoints" in navigator) {
  hasTouchScreen = navigator.msMaxTouchPoints > 0;
} else {
  const mQ = matchMedia?.("(pointer:coarse)");
  if (mQ?.media === "(pointer:coarse)") {
    hasTouchScreen = !!mQ.matches;
  } else if ("orientation" in window) {
    hasTouchScreen = true; // deprecated, but good fallback
  } else {
    // Only as a last resort, fall back to user agent sniffing
    const UA = navigator.userAgent;
    hasTouchScreen =
      /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
      /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA);
  }
}

if (hasTouchScreen) {
  document.getElementById("exampleButton").style.padding = "1em";
}

Đối với kích thước màn hình, hãy sử dụng cửa sổ. chiều rộng bên trong và cửa sổ. addEventListener("resize", () => { /*refresh những thứ phụ thuộc vào kích thước màn hình*/ }). Điều bạn muốn làm đối với kích thước màn hình không phải là cắt giảm thông tin trên màn hình nhỏ hơn. Điều đó sẽ chỉ làm phiền mọi người vì nó sẽ buộc họ phải sử dụng phiên bản dành cho máy tính để bàn. Thay vào đó, hãy cố gắng có ít cột thông tin hơn trên trang dài hơn trên màn hình nhỏ hơn trong khi có nhiều cột hơn với trang ngắn hơn trên kích thước màn hình lớn hơn. Có thể dễ dàng đạt được hiệu ứng này bằng cách sử dụng hộp linh hoạt CSS, đôi khi có số float dưới dạng dự phòng một phần

Ngoài ra, hãy cố gắng di chuyển thông tin ít liên quan/quan trọng hơn xuống dưới cùng và nhóm nội dung của trang lại với nhau một cách có ý nghĩa. Mặc dù không có chủ đề, nhưng có lẽ ví dụ chi tiết sau đây có thể cung cấp cho bạn thông tin chi tiết và ý tưởng thuyết phục bạn từ bỏ việc đánh hơi tác nhân người dùng. Chúng ta hãy tưởng tượng một trang bao gồm các hộp thông tin; . Mỗi hộp có một hình ảnh, tổng quan và một sự thật lịch sử thú vị. Hình ảnh được giữ ở kích thước hợp lý tối đa ngay cả trên màn hình lớn. Với mục đích nhóm nội dung một cách có ý nghĩa, tất cả các hộp dành cho mèo được tách ra khỏi tất cả các hộp dành cho chó sao cho các hộp dành cho mèo và chó không bị trộn lẫn với nhau. Trên một màn hình lớn, nó tiết kiệm không gian để có nhiều cột để giảm không gian lãng phí ở bên trái và bên phải của hình ảnh. Các hộp có thể được tách thành nhiều cột thông qua hai phương pháp công bằng như nhau. Từ thời điểm này trở đi, chúng ta sẽ giả sử rằng tất cả các hộp dành cho chó nằm ở đầu mã nguồn, rằng tất cả các hộp dành cho mèo ở cuối mã nguồn và tất cả các hộp này đều có cùng một phần tử cha. Tất nhiên, có một ví dụ duy nhất về hộp dành cho chó ngay phía trên hộp dành cho mèo. Phương pháp đầu tiên sử dụng các Hộp linh hoạt theo chiều ngang để nhóm nội dung sao cho khi trang được hiển thị cho người dùng cuối, tất cả các hộp dành cho chó nằm ở đầu trang và tất cả các hộp dành cho mèo ở phía dưới trang. Phương pháp thứ hai sử dụng bố cục Cột và gửi lại tất cả những con chó ở bên trái và tất cả những con mèo ở bên phải. Chỉ trong trường hợp cụ thể này, việc không cung cấp dự phòng cho các hộp linh hoạt/nhiều cột là phù hợp, dẫn đến một cột gồm các hộp rất rộng trên các trình duyệt cũ. Cũng xem xét những điều sau đây. Nếu nhiều người truy cập trang web để xem mèo, thì có thể nên đặt tất cả mèo trong mã nguồn cao hơn chó để nhiều người có thể tìm thấy những gì họ đang tìm kiếm nhanh hơn trên màn hình nhỏ hơn nơi nội dung thu gọn

Next, always make your code dynamic. The user can flip their mobile device on its side, changing the width and height of the page. Or, there might be some weird flip-phone-like device thing in the future where flipping it out extends the screen. Do not be the developer having a headache over how to deal with the flip-phone-like device thing. Never be satisfied with your webpage until you can open up the dev tools side panel and resize the screen while the webpage looks smooth, fluid, and dynamically resized. The simplest way to do this is to separate all the code that moves content around based on screen size to a single function that is called when the page is loaded and at each resize event thereafter. If there is a lot calculated by this layout function before it determines the new layout of the page, then consider debouncing the event listener such that it is not called as often. Also note that there is a huge difference between the media queries

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

Làm tốt nhất việc đánh hơi tác nhân người dùng

Sau khi xem xét tất cả các lựa chọn thay thế tốt hơn ở trên để đánh hơi tác nhân người dùng, vẫn có một số trường hợp tiềm năng mà việc đánh hơi tác nhân người dùng là phù hợp và hợp lý

Một trong những trường hợp như vậy là sử dụng tác nhân người dùng đánh hơi làm dự phòng khi phát hiện xem thiết bị có màn hình cảm ứng hay không. Xem phần Phát hiện thiết bị di động để biết thêm thông tin

Một trường hợp khác là để sửa lỗi trong trình duyệt không tự động cập nhật. Internet Explorer (trên Windows) và Webkit (trên iOS) là hai ví dụ hoàn hảo. Trước phiên bản 9, Internet Explorer gặp sự cố với lỗi hiển thị, lỗi CSS, lỗi API, v.v. Tuy nhiên, trước phiên bản 9, Internet Explorer rất dễ bị phát hiện dựa trên các tính năng dành riêng cho trình duyệt có sẵn. Webkit tệ hơn một chút vì Apple buộc tất cả các trình duyệt trên iOS phải sử dụng Webkit nội bộ, do đó người dùng không có cách nào để có được một trình duyệt cập nhật tốt hơn trên các thiết bị cũ hơn. Hầu hết các lỗi có thể được phát hiện, nhưng một số lỗi cần nhiều nỗ lực hơn để phát hiện hơn những lỗi khác. Trong những trường hợp như vậy, có thể hữu ích khi sử dụng tính năng đánh hơi tác nhân người dùng để tiết kiệm hiệu suất. Ví dụ: Webkit 6 có lỗi theo đó khi hướng thiết bị thay đổi, trình duyệt có thể không kích hoạt trình nghe MediaQueryList khi cần. Để khắc phục lỗi này, hãy quan sát mã bên dưới

if (!navigator.userAgent.includes('Chrome')) {
  // the user is NOT running Chrome
}

Phần nào của tác nhân người dùng chứa thông tin bạn đang tìm kiếm?

Vì không có sự đồng nhất về phần khác nhau của chuỗi tác nhân người dùng, nên đây là phần phức tạp

Tên trình duyệt

Khi mọi người nói rằng họ muốn "phát hiện trình duyệt", thường thì họ thực sự muốn "phát hiện công cụ kết xuất". Bạn có thực sự muốn phát hiện Firefox thay vì SeaMonkey hay Chrome thay vì Chromium không?

Hầu hết các trình duyệt đặt tên và phiên bản ở định dạng BrowserName/VersionNumber, với ngoại lệ đáng chú ý là Internet Explorer. Nhưng vì tên không phải là thông tin duy nhất trong chuỗi tác nhân người dùng ở định dạng đó, bạn không thể khám phá tên của trình duyệt, bạn chỉ có thể kiểm tra xem tên bạn đang tìm kiếm. Nhưng lưu ý rằng một số trình duyệt đang nói dối. Ví dụ, Chrome báo cáo cả Chrome và Safari. Vì vậy, để phát hiện Safari, bạn phải kiểm tra chuỗi Safari và không có chuỗi Chrome, Chromium thường tự báo cáo là Chrome hoặc Seamonkey đôi khi tự báo cáo là Firefox

Ngoài ra, chú ý không sử dụng biểu thức chính quy đơn giản trên BrowserName, tác nhân người dùng cũng chứa các chuỗi bên ngoài cú pháp Keyword/Value. Chẳng hạn, Safari & Chrome chứa chuỗi 'like Gecko'

let isLookBehindSupported = false;

try {
  new RegExp("(?<=)");
  isLookBehindSupported = true;
} catch (err) {
  // If the agent doesn't support look behinds, the attempted
  // creation of a RegExp object using that syntax throws and
  // isLookBehindSupported remains false.
}

const splitUpString = isLookBehindSupported
  ? (str) => String(str).split(new RegExp("(?<=[A-Z])"))
  : (str) => str.replace(/[A-Z]/g, "z$1").split(/z(?=[A-Z])/g);

let isLookBehindSupported = false;

try {
  new RegExp("(?<=)");
  isLookBehindSupported = true;
} catch (err) {
  // If the agent doesn't support look behinds, the attempted
  // creation of a RegExp object using that syntax throws and
  // isLookBehindSupported remains false.
}

const splitUpString = isLookBehindSupported
  ? (str) => String(str).split(new RegExp("(?<=[A-Z])"))
  : (str) => str.replace(/[A-Z]/g, "z$1").split(/z(?=[A-Z])/g);

let isLookBehindSupported = false;

try {
  new RegExp("(?<=)");
  isLookBehindSupported = true;
} catch (err) {
  // If the agent doesn't support look behinds, the attempted
  // creation of a RegExp object using that syntax throws and
  // isLookBehindSupported remains false.
}

const splitUpString = isLookBehindSupported
  ? (str) => String(str).split(new RegExp("(?<=[A-Z])"))
  : (str) => str.replace(/[A-Z]/g, "z$1").split(/z(?=[A-Z])/g);

let isLookBehindSupported = false;

try {
  new RegExp("(?<=)");
  isLookBehindSupported = true;
} catch (err) {
  // If the agent doesn't support look behinds, the attempted
  // creation of a RegExp object using that syntax throws and
  // isLookBehindSupported remains false.
}

const splitUpString = isLookBehindSupported
  ? (str) => String(str).split(new RegExp("(?<=[A-Z])"))
  : (str) => str.replace(/[A-Z]/g, "z$1").split(/z(?=[A-Z])/g);

let hasTouchScreen = false;
if ("maxTouchPoints" in navigator) {
  hasTouchScreen = navigator.maxTouchPoints > 0;
} else if ("msMaxTouchPoints" in navigator) {
  hasTouchScreen = navigator.msMaxTouchPoints > 0;
} else {
  const mQ = matchMedia?.("(pointer:coarse)");
  if (mQ?.media === "(pointer:coarse)") {
    hasTouchScreen = !!mQ.matches;
  } else if ("orientation" in window) {
    hasTouchScreen = true; // deprecated, but good fallback
  } else {
    // Only as a last resort, fall back to user agent sniffing
    const UA = navigator.userAgent;
    hasTouchScreen =
      /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
      /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA);
  }
}

if (hasTouchScreen) {
  document.getElementById("exampleButton").style.padding = "1em";
}

let hasTouchScreen = false;
if ("maxTouchPoints" in navigator) {
  hasTouchScreen = navigator.maxTouchPoints > 0;
} else if ("msMaxTouchPoints" in navigator) {
  hasTouchScreen = navigator.msMaxTouchPoints > 0;
} else {
  const mQ = matchMedia?.("(pointer:coarse)");
  if (mQ?.media === "(pointer:coarse)") {
    hasTouchScreen = !!mQ.matches;
  } else if ("orientation" in window) {
    hasTouchScreen = true; // deprecated, but good fallback
  } else {
    // Only as a last resort, fall back to user agent sniffing
    const UA = navigator.userAgent;
    hasTouchScreen =
      /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
      /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA);
  }
}

if (hasTouchScreen) {
  document.getElementById("exampleButton").style.padding = "1em";
}

let hasTouchScreen = false;
if ("maxTouchPoints" in navigator) {
  hasTouchScreen = navigator.maxTouchPoints > 0;
} else if ("msMaxTouchPoints" in navigator) {
  hasTouchScreen = navigator.msMaxTouchPoints > 0;
} else {
  const mQ = matchMedia?.("(pointer:coarse)");
  if (mQ?.media === "(pointer:coarse)") {
    hasTouchScreen = !!mQ.matches;
  } else if ("orientation" in window) {
    hasTouchScreen = true; // deprecated, but good fallback
  } else {
    // Only as a last resort, fall back to user agent sniffing
    const UA = navigator.userAgent;
    hasTouchScreen =
      /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
      /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA);
  }
}

if (hasTouchScreen) {
  document.getElementById("exampleButton").style.padding = "1em";
}

let isLookBehindSupported = false;

try {
  new RegExp("(?<=)");
  isLookBehindSupported = true;
} catch (err) {
  // If the agent doesn't support look behinds, the attempted
  // creation of a RegExp object using that syntax throws and
  // isLookBehindSupported remains false.
}

const splitUpString = isLookBehindSupported
  ? (str) => String(str).split(new RegExp("(?<=[A-Z])"))
  : (str) => str.replace(/[A-Z]/g, "z$1").split(/z(?=[A-Z])/g);

let hasTouchScreen = false;
if ("maxTouchPoints" in navigator) {
  hasTouchScreen = navigator.maxTouchPoints > 0;
} else if ("msMaxTouchPoints" in navigator) {
  hasTouchScreen = navigator.msMaxTouchPoints > 0;
} else {
  const mQ = matchMedia?.("(pointer:coarse)");
  if (mQ?.media === "(pointer:coarse)") {
    hasTouchScreen = !!mQ.matches;
  } else if ("orientation" in window) {
    hasTouchScreen = true; // deprecated, but good fallback
  } else {
    // Only as a last resort, fall back to user agent sniffing
    const UA = navigator.userAgent;
    hasTouchScreen =
      /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
      /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA);
  }
}

if (hasTouchScreen) {
  document.getElementById("exampleButton").style.padding = "1em";
}

let hasTouchScreen = false;
if ("maxTouchPoints" in navigator) {
  hasTouchScreen = navigator.maxTouchPoints > 0;
} else if ("msMaxTouchPoints" in navigator) {
  hasTouchScreen = navigator.msMaxTouchPoints > 0;
} else {
  const mQ = matchMedia?.("(pointer:coarse)");
  if (mQ?.media === "(pointer:coarse)") {
    hasTouchScreen = !!mQ.matches;
  } else if ("orientation" in window) {
    hasTouchScreen = true; // deprecated, but good fallback
  } else {
    // Only as a last resort, fall back to user agent sniffing
    const UA = navigator.userAgent;
    hasTouchScreen =
      /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
      /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA);
  }
}

if (hasTouchScreen) {
  document.getElementById("exampleButton").style.padding = "1em";
}

let hasTouchScreen = false;
if ("maxTouchPoints" in navigator) {
  hasTouchScreen = navigator.maxTouchPoints > 0;
} else if ("msMaxTouchPoints" in navigator) {
  hasTouchScreen = navigator.msMaxTouchPoints > 0;
} else {
  const mQ = matchMedia?.("(pointer:coarse)");
  if (mQ?.media === "(pointer:coarse)") {
    hasTouchScreen = !!mQ.matches;
  } else if ("orientation" in window) {
    hasTouchScreen = true; // deprecated, but good fallback
  } else {
    // Only as a last resort, fall back to user agent sniffing
    const UA = navigator.userAgent;
    hasTouchScreen =
      /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
      /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA);
  }
}

if (hasTouchScreen) {
  document.getElementById("exampleButton").style.padding = "1em";
}

let hasTouchScreen = false;
if ("maxTouchPoints" in navigator) {
  hasTouchScreen = navigator.maxTouchPoints > 0;
} else if ("msMaxTouchPoints" in navigator) {
  hasTouchScreen = navigator.msMaxTouchPoints > 0;
} else {
  const mQ = matchMedia?.("(pointer:coarse)");
  if (mQ?.media === "(pointer:coarse)") {
    hasTouchScreen = !!mQ.matches;
  } else if ("orientation" in window) {
    hasTouchScreen = true; // deprecated, but good fallback
  } else {
    // Only as a last resort, fall back to user agent sniffing
    const UA = navigator.userAgent;
    hasTouchScreen =
      /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
      /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA);
  }
}

if (hasTouchScreen) {
  document.getElementById("exampleButton").style.padding = "1em";
}

let hasTouchScreen = false;
if ("maxTouchPoints" in navigator) {
  hasTouchScreen = navigator.maxTouchPoints > 0;
} else if ("msMaxTouchPoints" in navigator) {
  hasTouchScreen = navigator.msMaxTouchPoints > 0;
} else {
  const mQ = matchMedia?.("(pointer:coarse)");
  if (mQ?.media === "(pointer:coarse)") {
    hasTouchScreen = !!mQ.matches;
  } else if ("orientation" in window) {
    hasTouchScreen = true; // deprecated, but good fallback
  } else {
    // Only as a last resort, fall back to user agent sniffing
    const UA = navigator.userAgent;
    hasTouchScreen =
      /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
      /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA);
  }
}

if (hasTouchScreen) {
  document.getElementById("exampleButton").style.padding = "1em";
}

[1] Safari cung cấp hai số phiên bản. một kỹ thuật trong mã thông báo

let hasTouchScreen = false;
if ("maxTouchPoints" in navigator) {
  hasTouchScreen = navigator.maxTouchPoints > 0;
} else if ("msMaxTouchPoints" in navigator) {
  hasTouchScreen = navigator.msMaxTouchPoints > 0;
} else {
  const mQ = matchMedia?.("(pointer:coarse)");
  if (mQ?.media === "(pointer:coarse)") {
    hasTouchScreen = !!mQ.matches;
  } else if ("orientation" in window) {
    hasTouchScreen = true; // deprecated, but good fallback
  } else {
    // Only as a last resort, fall back to user agent sniffing
    const UA = navigator.userAgent;
    hasTouchScreen =
      /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
      /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA);
  }
}

if (hasTouchScreen) {
  document.getElementById("exampleButton").style.padding = "1em";
}

if (!navigator.userAgent.includes('Chrome')) {
  // the user is NOT running Chrome
}

Tất nhiên, hoàn toàn không có gì đảm bảo rằng một trình duyệt khác sẽ không chiếm đoạt một số thứ này (như Chrome đã chiếm đoạt chuỗi Safari trong quá khứ). Đó là lý do tại sao việc phát hiện trình duyệt bằng chuỗi tác nhân người dùng là không đáng tin cậy và chỉ nên được thực hiện khi kiểm tra số phiên bản (việc chiếm đoạt các phiên bản trước ít có khả năng xảy ra hơn)

phiên bản trình duyệt

Phiên bản trình duyệt thường, nhưng không phải luôn luôn, đặt vào phần giá trị của mã thông báo BrowserName/VersionNumber trong Chuỗi tác nhân người dùng. Tất nhiên, đây không phải là trường hợp của Internet Explorer (đặt số phiên bản ngay sau mã thông báo MSIE) và đối với Opera sau phiên bản 10, đã thêm mã thông báo Phiên bản/Số phiên bản

Một lần nữa, hãy đảm bảo lấy đúng mã thông báo cho trình duyệt bạn đang tìm kiếm, vì không có gì đảm bảo rằng những mã thông báo khác sẽ chứa số hợp lệ

Công cụ dựng hình

Như đã thấy trước đó, trong hầu hết các trường hợp, tìm kiếm công cụ kết xuất là cách tốt hơn để thực hiện. Điều này sẽ giúp không loại trừ các trình duyệt ít được biết đến hơn. Các trình duyệt chia sẻ một công cụ kết xuất chung sẽ hiển thị một trang theo cùng một cách. nó thường là một giả định công bằng rằng những gì sẽ làm việc trong một sẽ làm việc khác

Có năm công cụ kết xuất chính. Đinh ba, Tắc kè, Presto, Blink và WebKit. Vì việc đánh hơi tên công cụ kết xuất là phổ biến, nên nhiều tác nhân người dùng đã thêm các tên kết xuất khác để kích hoạt phát hiện. Do đó, điều quan trọng là phải chú ý để không kích hoạt dương tính giả khi phát hiện công cụ kết xuất

if (!navigator.userAgent.includes('Chrome')) {
  // the user is NOT running Chrome
}

if (!navigator.userAgent.includes('Chrome')) {
  // the user is NOT running Chrome
}

let hasTouchScreen = false;
if ("maxTouchPoints" in navigator) {
  hasTouchScreen = navigator.maxTouchPoints > 0;
} else if ("msMaxTouchPoints" in navigator) {
  hasTouchScreen = navigator.msMaxTouchPoints > 0;
} else {
  const mQ = matchMedia?.("(pointer:coarse)");
  if (mQ?.media === "(pointer:coarse)") {
    hasTouchScreen = !!mQ.matches;
  } else if ("orientation" in window) {
    hasTouchScreen = true; // deprecated, but good fallback
  } else {
    // Only as a last resort, fall back to user agent sniffing
    const UA = navigator.userAgent;
    hasTouchScreen =
      /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
      /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA);
  }
}

if (hasTouchScreen) {
  document.getElementById("exampleButton").style.padding = "1em";
}

if (!navigator.userAgent.includes('Chrome')) {
  // the user is NOT running Chrome
}

if (!navigator.userAgent.includes('Chrome')) {
  // the user is NOT running Chrome
}

let isLookBehindSupported = false;

try {
  new RegExp("(?<=)");
  isLookBehindSupported = true;
} catch (err) {
  // If the agent doesn't support look behinds, the attempted
  // creation of a RegExp object using that syntax throws and
  // isLookBehindSupported remains false.
}

const splitUpString = isLookBehindSupported
  ? (str) => String(str).split(new RegExp("(?<=[A-Z])"))
  : (str) => str.replace(/[A-Z]/g, "z$1").split(/z(?=[A-Z])/g);

Phiên bản động cơ kết xuất

Hầu hết các công cụ kết xuất đặt số phiên bản trong mã thông báo RenderingEngine/VersionNumber, với ngoại lệ đáng chú ý là Gecko. Gecko đặt số phiên bản Gecko trong phần nhận xét của Tác nhân người dùng sau chuỗi

if (!navigator.userAgent.includes('Chrome')) {
  // the user is NOT running Chrome
}

if (!navigator.userAgent.includes('Chrome')) {
  // the user is NOT running Chrome
}

hệ điều hành

Hệ điều hành được cung cấp trong hầu hết các chuỗi Tác nhân người dùng (mặc dù không phải là nền tảng tập trung vào web như Firefox OS), nhưng định dạng thay đổi rất nhiều. Nó là một chuỗi cố định giữa hai dấu chấm phẩy, trong phần comment của User Agent. Các chuỗi này dành riêng cho từng trình duyệt. Chúng cho biết hệ điều hành, nhưng cũng thường là phiên bản và thông tin về phần cứng phụ thuộc (32 hoặc 64 bit hoặc Intel/PPC cho Mac)

Giống như trong mọi trường hợp, các chuỗi này có thể thay đổi trong tương lai, người ta chỉ nên sử dụng chúng cùng với việc phát hiện các trình duyệt đã phát hành. Một cuộc khảo sát công nghệ phải được thực hiện để điều chỉnh tập lệnh khi các phiên bản trình duyệt mới sắp ra mắt

Di động, Máy tính bảng hoặc Máy tính để bàn

Lý do phổ biến nhất để thực hiện đánh hơi tác nhân người dùng là để xác định loại thiết bị mà trình duyệt chạy trên đó. Mục tiêu là phân phát HTML khác nhau cho các loại thiết bị khác nhau

• Đừng bao giờ cho rằng trình duyệt hoặc công cụ kết xuất chỉ chạy trên một loại thiết bị. Đặc biệt là không tạo các giá trị mặc định khác nhau cho các trình duyệt hoặc công cụ hiển thị khác nhau
• Không bao giờ sử dụng mã thông báo hệ điều hành để xác định xem trình duyệt trên thiết bị di động, máy tính bảng hay máy tính để bàn. Hệ điều hành có thể chạy trên nhiều loại (ví dụ: Android chạy trên máy tính bảng cũng như điện thoại)

Bảng sau đây tóm tắt cách các nhà cung cấp trình duyệt phổ biến chỉ ra rằng trình duyệt của họ đang chạy trên thiết bị di động

if (!navigator.userAgent.includes('Chrome')) {
  // the user is NOT running Chrome
}

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

Tóm lại, chúng tôi khuyên bạn nên tìm chuỗi

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

Ghi chú. Nếu thiết bị đủ lớn để thiết bị không được đánh dấu bằng

if (navigator.userAgent.indexOf('Chrome') < 0) {
  // the user is NOT running Chrome
}

Làm cách nào bạn có thể phát hiện tên trình duyệt của khách hàng trong JS?

Tại sao JavaScript không hoạt động trong Internet Explorer?