Saya bertanya-tanya apakah mungkin untuk mendeteksi apakah browser berjalan di iOS, mirip dengan bagaimana Anda dapat mendeteksi fitur dengan Modernizr (meskipun ini jelas deteksi perangkat daripada deteksi fitur).

Biasanya saya lebih suka deteksi fitur, tetapi saya perlu mencari tahu apakah suatu perangkat iOS karena cara mereka menangani video sesuai pertanyaan ini, YouTube API tidak bekerja dengan perangkat iPad / iPhone / non-Flash

Mendeteksi iOS

Saya bukan penggemar Agen Pengguna mengendus, tetapi di sini adalah bagaimana Anda akan melakukannya:

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

Cara lain mengandalkan navigator.platform:

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

iOSakan menjadi trueataufalse

Kenapa tidak MSStream

Microsoft menyuntikkan kata iPhone di IE11 userAgentuntuk mencoba menipu Gmail. Karena itu kita perlu mengecualikannya. Info lebih lanjut tentang ini di sini dan di sini .

Di bawah ini adalah pembaruan IE11 userAgent( Pembaruan Internet Explorer untuk Windows Phone 8.1):

Mozilla / 5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident / 7.0; Touch; rv: 11.0; IEMobile / 11.0; NOKIA; Lumia 930) seperti iPhone OS 7_0_3 Mac OS X AppleWebKit / 537 (KHTML, seperti Gecko) Mobile Safari / 537

Menambahkan lebih banyak perangkat dengan mudah, tanpa menggunakan Ekspresi Reguler:

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()akan menjadi trueataufalse

Catatan: Keduanya navigator.userAgentdan navigator.platformdapat dipalsukan oleh pengguna atau ekstensi browser.

Mendeteksi versi iOS

Cara paling umum untuk mendeteksi versi iOS adalah dengan menguraikannya dari string Agen Pengguna . Tetapi ada juga inferensi deteksi fitur * ;

Kami tahu fakta yang history APIdiperkenalkan di iOS4 - matchMedia APIdi iOS5 - webAudio APIdi iOS6 -WebSpeech API di iOS7 dan seterusnya ..

Catatan: Kode berikut ini tidak dapat diandalkan dan akan rusak jika salah satu fitur HTML5 ini tidak digunakan dalam versi iOS yang lebih baru. Anda telah diperingatkan!

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';
}

Setelah iOS 13 Anda harus mendeteksi perangkat iOS seperti ini, karena iPad tidak akan terdeteksi sebagai perangkat iOS dengan cara lama (karena opsi "desktop" baru, diaktifkan secara default):

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

Kondisi pertama untuk iOS <13 atau iPhone atau iPad dengan mode Desktop yang dinonaktifkan, kondisi kedua untuk iPadOS 13 dalam konfigurasi default, karena posisinya sendiri seperti Macintosh Intel, tetapi sebenarnya adalah satu-satunya Macintosh dengan multi-touch.

Alih-alih meretas daripada solusi nyata, tetapi bekerja dengan andal bagi saya

PS Seperti yang dikatakan sebelumnya, Anda mungkin harus menambahkan pemeriksaan IE

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

Ini mengatur variabel _iOSDeviceke true atau false

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

Jika Anda menggunakan Modernizr , Anda dapat menambahkan tes khusus untuk itu.

Tidak masalah mode deteksi mana yang Anda putuskan untuk digunakan (userAgent, navigator.vendor atau navigator.platform), Anda selalu dapat membungkusnya untuk penggunaan yang lebih mudah nanti.

//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');
}

Ada tes Modernizr khusus ini: https://gist.github.com/855078

Versi yang disederhanakan dan mudah diperluas.

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

Mungkin patut untuk menjawab bahwa iPad yang menjalankan iOS 13 akan navigator.platformdiatur ke MacIntel, yang berarti Anda harus mencari cara lain untuk mendeteksi perangkat iPadOS.

Saya menulis ini beberapa tahun yang lalu tetapi saya percaya itu masih berfungsi:

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");

    }

Agen-pengguna pada perangkat iOS mengatakan iPhone atau iPad di dalamnya. Saya hanya memfilter berdasarkan kata kunci tersebut.

Sedapat mungkin ketika menambahkan tes Modernizr Anda harus menambahkan tes untuk fitur, bukan perangkat atau sistem operasi. Tidak ada yang salah dengan menambahkan sepuluh tes semua pengujian untuk iPhone jika itu yang diperlukan. Beberapa hal tidak dapat dideteksi fitur.

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

Misalnya pada iPhone (bukan iPad) video tidak dapat diputar inline pada halaman web, itu membuka layar penuh. Jadi saya membuat tes 'no-inpage-video'

Anda kemudian dapat menggunakan ini di css (Modernizr menambahkan kelas .no-inpagevideoke <html>tag jika tes gagal)

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

Ini akan menyembunyikan video di iPhone (yang sebenarnya saya lakukan dalam kasus ini adalah menampilkan gambar alternatif dengan onclick untuk memutar video - Saya hanya tidak ingin pemutar video dan tombol putar tampil).

Wow, banyak kode rumit gondrong di sini. Tolong sederhana saja!

Yang ini IMHO cepat, simpan, dan bekerja dengan baik:

 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);

• Cepat karena regexp memeriksa ^ s posisi platform string pertama tarting dan berhenti jika tidak ada "iP" (lebih cepat dari mencari UA string panjang sampai akhir pula)
• Ini lebih aman daripada pemeriksaan UA (dengan asumsi navigator.platform cenderung dipalsukan)
• Mendeteksi Simulator iPhone / iPad

Perbarui sedikit jawaban pertama menggunakan pendekatan yang lebih fungsional.

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

Anda juga bisa menggunakan includes

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

Tidak ada jawaban sebelumnya di sini yang berfungsi untuk semua browser utama di semua versi iOS, termasuk iOS 13. Ini adalah solusi yang berfungsi untuk Safari, Chrome dan Firefox untuk semua versi 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()));
})();

Perhatikan bahwa cuplikan kode ini ditulis dengan prioritas pada keterbacaan, bukan keringkasan atau kinerja.

Penjelasan:

• Jika agen pengguna berisi "iPod | iPhone | iPad" maka jelas perangkatnya adalah iOS. Kalau tidak, lanjutkan ...

• Agen pengguna lain apa pun yang tidak mengandung "Macintosh" bukan perangkat Apple dan karenanya tidak bisa iOS. Kalau tidak, itu adalah perangkat Apple, jadi lanjutkan ...

• Jika maxTouchPointsmemiliki nilai 1atau lebih besar maka perangkat Apple memiliki layar sentuh dan karenanya harus iOS karena tidak ada Mac dengan layar sentuh (kudos to kikiwora untuk menyebutkan maxTouchPoints). Perhatikan bahwa maxTouchPointsadalah undefineduntuk iOS 12 dan di bawah, jadi kita perlu solusi yang berbeda untuk skenario yang ...

• iOS 12 dan di bawahnya memiliki kekhasan yang tidak ada di Mac OS. Kekhasannya adalah bahwa volumeproperti Audioelemen tidak dapat berhasil diatur ke nilai apa pun selain 1. Ini karena Apple tidak mengizinkan perubahan volume pada Audioelemen untuk perangkat iOS, tetapi untuk Mac OS. Kekhasan itu dapat digunakan sebagai metode fallback akhir untuk membedakan perangkat iOS dari perangkat Mac OS.

Dalam kasus saya agen pengguna tidak cukup baik karena di iPad agen pengguna sama dengan di Mac OS, oleh karena itu saya harus melakukan trik jahat:

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
}

Untuk mendeteksi versi iOS, kita harus menghancurkan agen pengguna dengan kode Javascript seperti ini:

 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;