Tôi tự hỏi liệu có thể phát hiện xem trình duyệt có chạy trên iOS hay không, tương tự như cách bạn có thể phát hiện tính năng với Modernizr (mặc dù đây rõ ràng là phát hiện thiết bị thay vì phát hiện tính năng).

Thông thường tôi sẽ ưu tiên phát hiện tính năng thay vào đó, nhưng tôi cần tìm hiểu xem một thiết bị có phải là iOS hay không vì cách họ xử lý video theo câu hỏi này API YouTube không hoạt động với thiết bị iPad / iPhone / không phải Flash

Phát hiện iOS

Tôi không phải là người hâm mộ của Tác nhân người dùng đánh hơi, nhưng đây là cách bạn sẽ làm điều đó:

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

Một cách khác là dựa vào navigator.platform:

var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);

iOSsẽ là một trong hai truehoặcfalse

Tại sao không phải là MSStream

Microsoft đã chèn từ iPhone vào IE11 userAgentđể thử và đánh lừa Gmail bằng cách nào đó. Vì vậy, chúng ta cần loại trừ nó. Thông tin thêm về điều này ở đây và ở đây .

Dưới đây là bản cập nhật của IE11 userAgent(Bản cập nhật Internet Explorer cho Windows Phone 8.1):

Mozilla / 5.0 (Di động; Windows Phone 8.1; Android 4.0; ARM; Trident / 7.0; Touch; rv: 11.0; IEMobile / 11.0; Nokia; Lumia 930) như iPhone OS 7_0_3 Mac OS X AppleWebKit / 537 (KHTML, như Gecko) Safari di động / 537

Dễ dàng thêm nhiều thiết bị hơn mà không cần sử dụng Biểu thức thông thường:

function iOS() {

  var iDevices = [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ];

  if (navigator.platform) {
    while (iDevices.length) {
      if (navigator.platform === iDevices.pop()){ return true; }
    }
  }

  return false;
}

iOS()sẽ là một trong hai truehoặcfalse

Lưu ý: Cả hai navigator.userAgentvà navigator.platformcó thể được làm giả bởi người dùng hoặc tiện ích mở rộng trình duyệt.

Phát hiện phiên bản iOS

Cách phổ biến nhất để phát hiện phiên bản iOS là phân tích cú pháp từ chuỗi Tác nhân người dùng . Nhưng cũng có suy luận phát hiện tính năng * ;

Chúng tôi biết một thực tế history APIđã được giới thiệu trong iOS4 - matchMedia APItrong iOS5 - webAudio APItrong iOS6 - WebSpeech APItrong iOS7 và v.v.

Lưu ý: Đoạn mã sau không đáng tin cậy và sẽ bị hỏng nếu bất kỳ tính năng HTML5 nào bị phản đối trong phiên bản iOS mới hơn. Bạn đã được cảnh báo!

function iOSversion() {

  if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
    if (window.indexedDB) { return 'iOS 8 and up'; }
    if (window.SpeechSynthesisUtterance) { return 'iOS 7'; }
    if (window.webkitAudioContext) { return 'iOS 6'; }
    if (window.matchMedia) { return 'iOS 5'; }
    if (window.history && 'pushState' in window.history) { return 'iOS 4'; }
    return 'iOS 3 or earlier';
  }

  return 'Not an iOS device';
}

Sau iOS 13, bạn nên phát hiện các thiết bị iOS như thế này, vì iPad sẽ không được phát hiện là thiết bị iOS theo cách cũ (do tùy chọn "máy tính để bàn" mới, được bật theo mặc định):

let isIOS = /iPad|iPhone|iPod/.test(navigator.platform)
|| (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)

Điều kiện đầu tiên cho iOS <13 hoặc iPhone hoặc iPad với chế độ Máy tính để bàn bị vô hiệu hóa, điều kiện thứ hai cho iPadOS 13 trong cấu hình mặc định, vì nó có vị trí giống như Macintosh Intel, nhưng thực tế là Macintosh duy nhất có cảm ứng đa điểm.

Thay vì hack hơn là một giải pháp thực sự, nhưng công việc đáng tin cậy đối với tôi

PS Như đã nói trước đó, có lẽ bạn nên thêm kiểm tra IE

let isIOS = (/iPad|iPhone|iPod/.test(navigator.platform) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
!window.MSStream

Điều này đặt biến _iOSDevicethành đúng hoặc sai

_iOSDevice = !!navigator.platform.match(/iPhone|iPod|iPad/);

Nếu bạn đang sử dụng Modernizr , bạn có thể thêm một bài kiểm tra tùy chỉnh cho nó.

Việc bạn quyết định sử dụng chế độ phát hiện nào (userAgent, navigator.vendor hoặc navigator.pl platform) không quan trọng, bạn luôn có thể gói nó để sử dụng dễ dàng hơn sau này.

//Add Modernizr test
Modernizr.addTest('isios', function() {
    return navigator.userAgent.match(/(iPad|iPhone|iPod)/g);
});

//usage
if (Modernizr.isios) {
    //this adds ios class to body
    Modernizr.prefixed('ios');
} else {
    //this adds notios class to body
    Modernizr.prefixed('notios');
}

Có các thử nghiệm Modernizr tùy chỉnh này: https://gist.github.com/855078

Một phiên bản đơn giản, dễ mở rộng.

var iOS = ['iPad', 'iPhone', 'iPod'].indexOf(navigator.platform) >= 0;

Có lẽ đáng để trả lời rằng iPad chạy iOS 13 sẽ được navigator.platformđặt thành MacIntel, điều đó có nghĩa là bạn sẽ cần tìm một cách khác để phát hiện các thiết bị iPadOS.

Tôi đã viết điều này một vài năm trước đây nhưng tôi tin rằng nó vẫn hoạt động:

if(navigator.vendor != null && navigator.vendor.match(/Apple Computer, Inc./) && navigator.userAgent.match(/iPhone/i) || (navigator.userAgent.match(/iPod/i))) 

    {

        alert("Ipod or Iphone");

    }

else if (navigator.vendor != null && navigator.vendor.match(/Apple Computer, Inc./) && navigator.userAgent.match(/iPad/i))  

    {

        alert("Ipad");

    }

else if (navigator.vendor != null && navigator.vendor.match(/Apple Computer, Inc./) && navigator.userAgent.indexOf('Safari') != -1)

    {

        alert("Safari");

    }

else if (navigator.vendor == null || navigator.vendor != null)

    {

        alert("Not Apple Based Browser");

    }

Các tác nhân người dùng trên thiết bị iOS cho biết iPhone hoặc iPad trong đó. Tôi chỉ lọc dựa trên những từ khóa đó.

Bất cứ nơi nào có thể khi thêm các bài kiểm tra Modernizr, bạn nên thêm một bài kiểm tra cho một tính năng, thay vì một thiết bị hoặc hệ điều hành. Không có gì sai khi thêm mười thử nghiệm tất cả các thử nghiệm cho iPhone nếu đó là những gì nó cần. Một số thứ không thể được phát hiện.

    Modernizr.addTest('inpagevideo', function ()
    {
        return navigator.userAgent.match(/(iPhone|iPod)/g) ? false : true;
    });

Chẳng hạn, video trên iPhone (không phải iPad) không thể phát trực tuyến trên trang web, nó sẽ mở ra toàn màn hình. Vì vậy, tôi đã tạo một thử nghiệm 'không có trong video'

Sau đó, bạn có thể sử dụng điều này trong css (Modernizr thêm một lớp .no-inpagevideovào <html>thẻ nếu thử nghiệm thất bại)

.no-inpagevideo video.product-video 
{
     display: none;
}

Điều này sẽ ẩn video trên iPhone (những gì tôi thực sự đang làm trong trường hợp này đang hiển thị một hình ảnh thay thế với một onclick để phát video - Tôi chỉ không muốn trình phát video mặc định và nút phát để hiển thị).

Wow, rất nhiều mã khó khăn dài ở đây. Giữ cho nó đơn giản, xin vui lòng!

Đây là IMHO nhanh, tiết kiệm và hoạt động tốt:

 iOS = /^iP/.test(navigator.platform);

 // or, more future-proof (in theory, probably not in practice):

 iOS = /^iP(hone|[ao]d)/.test(navigator.platform);

 // or, if you prefer readability:

 iOS = /^(iPhone|iPad|iPod)/.test(navigator.platform);

• Đó là nhanh vì kiểm tra regexp các ^ s tarting vị trí của chuỗi nền tảng đầu tiên và dừng lại nếu không có "iP" (nhanh hơn so với tìm kiếm trên chuỗi UA dài cho đến cuối cùng anyway)
• Nó an toàn hơn kiểm tra UA (giả sử navigator.pl platform ít bị làm giả hơn)
• Phát hiện Trình mô phỏng iPhone / iPad

Hơi cập nhật câu trả lời đầu tiên bằng cách sử dụng một cách tiếp cận chức năng hơn.

    const isIOS = [
      'iPad Simulator',
      'iPhone Simulator',
      'iPod Simulator',
      'iPad',
      'iPhone',
      'iPod',
    ].indexOf(navigator.platform) !== -1;

Không có câu trả lời nào trước đây ở đây hoạt động cho tất cả các trình duyệt chính trên tất cả các phiên bản iOS, kể cả iOS 13. Đây là một giải pháp hoạt động cho Safari, Chrome và Firefox cho tất cả các phiên bản iOS:

var isIOS = (function () {
    var iosQuirkPresent = function () {
        var audio = new Audio();

        audio.volume = 0.5;
        return audio.volume === 1;   // volume cannot be changed from "1" on iOS 12 and below
    };

    var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
    var isAppleDevice = navigator.userAgent.includes('Macintosh');
    var isTouchScreen = navigator.maxTouchPoints >= 1;   // true for iOS 13 (and hopefully beyond)

    return isIOS || (isAppleDevice && (isTouchScreen || iosQuirkPresent()));
})();

Lưu ý rằng đoạn mã này được viết với mức độ ưu tiên về khả năng đọc, không phải tính đồng nhất hoặc hiệu suất.

Giải trình:

• Nếu tác nhân người dùng chứa bất kỳ "iPod | iPhone | iPad" thì rõ ràng thiết bị là iOS. Nếu không, tiếp tục ...

• Bất kỳ tác nhân người dùng nào khác không chứa "Macintosh" không phải là thiết bị của Apple và do đó không thể là iOS. Mặt khác, nó là một thiết bị của Apple, vì vậy hãy tiếp tục ...

• Nếu maxTouchPointscó giá trị bằng 1hoặc lớn hơn thì thiết bị Apple có màn hình cảm ứng và do đó phải là iOS vì không có máy Mac nào có màn hình cảm ứng (kudos to kikiwora để đề cập maxTouchPoints). Lưu ý rằng maxTouchPointslà undefineddành cho iOS 12 và dưới, vì vậy chúng tôi cần một giải pháp khác nhau cho kịch bản ...

• iOS 12 trở xuống có một cách giải quyết không tồn tại trong Mac OS. Điều khó hiểu là thuộc volumetính của một Audiophần tử không thể được đặt thành công thành bất kỳ giá trị nào khác ngoài 1. Điều này là do Apple không cho phép thay đổi âm lượng trên thành Audiophần cho thiết bị iOS, nhưng đối với Mac OS. Điều đó có thể được sử dụng làm phương pháp dự phòng cuối cùng để phân biệt thiết bị iOS với thiết bị Mac OS.

Bạn cũng có thể dùng includes

  const isApple = ['iPhone', 'iPad', 'iPod'].includes(navigator.platform)

Trong trường hợp của tôi, tác nhân người dùng không đủ tốt vì trong Ipad, tác nhân người dùng giống như trong Mac OS, do đó tôi phải thực hiện một mẹo khó chịu:

var mql = window.matchMedia("(orientation: landscape)");

/**
 * If we are in landscape but the height is bigger than width
 */
if(mql.matches && window.screen.height > window.screen.width) {
    // IOS
} else {
    // Mac OS
}

Để phát hiện phiên bản iOS, người ta phải hủy cấu trúc tác nhân người dùng bằng mã Javascript như sau:

 var res = navigator.userAgent.match(/; CPU.*OS (\d_\d)/);
    if(res) {
        var strVer = res[res.length-1];
        strVer = strVer.replace("_", ".");
        version = strVer * 1;
    }

var isiOSSafari = (navigator.userAgent.match(/like Mac OS X/i)) ? true: false;