Modernizr ile algılamayı nasıl yapabileceğinize benzer şekilde, bir tarayıcının iOS'ta çalışıp çalışmadığını tespit etmenin mümkün olup olmadığını merak ediyorum (bu özellik algılama yerine cihaz algılama olsa da).

Normalde bunun yerine özellik algılamayı tercih ederim, ancak bu soruya göre videoları işlemeleri nedeniyle bir cihazın iOS olup olmadığını öğrenmem gerekiyor YouTube API'sı iPad / iPhone / Flash olmayan cihazlarla çalışmıyor

İOS'u algılama

Ben kullanıcı Ajan koklama hayranı değilim, ama nasıl yapacağını şöyle:

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

Başka bir yol da güvenmektir navigator.platform:

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

iOSya olacak trueyafalse

Neden MSStream değil

Microsoft, Gmail'i bir şekilde kandırmaya çalışmak için IE11'e iPhone kelimesini enjekte etti userAgent. Bu nedenle onu hariç tutmamız gerekiyor. Burada ve burada daha fazla bilgi .

IE11'in güncellenmiş sürümü userAgent(Windows Phone 8.1 için Internet Explorer Güncellemesi):

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

Normal İfadeler kullanmadan kolayca daha fazla cihaz ekleyin:

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()ya olacak trueyafalse

Not: Her ikisi de navigator.userAgentve navigator.platformkullanıcı veya bir tarayıcı uzantısı tarafından taklit edilebilir.

İOS sürümünü algılama

İOS sürümünü tespit etmenin en yaygın yolu , User Agent dizesinden ayrıştırmaktır . Ancak özellik algılama çıkarımları da vardır * ;

Biz bir gerçeği biliyorum history APItanıtıldı iOS4 - matchMedia APIin iOS5 - webAudio APIin iOS6 - WebSpeech APIin -iOS7 ve benzeri ..

Not: Aşağıdaki kod güvenilir değildir ve bu HTML5 özelliklerinden herhangi biri daha yeni bir iOS sürümünde kullanımdan kaldırılırsa bozulur. Uyarıldın!

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

İOS 13'ten sonra, iPad'in eski yöntemlerle iOS cihazları olarak algılanmayacağı için (böyle varsayılan olarak etkin olan yeni "masaüstü" seçenekleri nedeniyle) böyle iOS cihazlarını tespit etmelisiniz:

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

Masaüstü modunu devre dışı bırakan iOS <13 veya iPhone veya iPad için ilk koşul, varsayılan yapılandırmada iPadOS 13 için ikinci koşul, çünkü kendini Macintosh Intel gibi konumlandırıyor, ancak aslında çoklu dokunuşlu tek Macintosh.

Gerçek bir çözümden ziyade bir hack, ama benim için güvenilir bir şekilde çalış

PS Daha önce de söylendiği gibi, muhtemelen IE kontrolü eklemelisiniz

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

Bu değişken setleri _iOSDeviceiçin gerçek veya FALSE

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

Modernizr kullanıyorsanız , bunun için özel bir test ekleyebilirsiniz.

Hangi algılama modunu kullanmaya karar verdiğiniz önemli değildir (userAgent, navigator.vendor veya navigator.platform), daha sonra daha kolay kullanmak için her zaman kapatabilirsiniz.

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

Bu özel Modernizr testleri var: https://gist.github.com/855078

Basitleştirilmiş, genişletilmesi kolay bir versiyon.

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

Muhtemelen iOS 13 çalıştıran iPad'lerin navigator.platformayarlanacağına cevap vermeye değer MacIntel, bu da iPadOS cihazlarını tespit etmek için başka bir yol bulmanız gerektiği anlamına gelir.

Bunu birkaç yıl önce yazdım ama hala işe yaradığına inanıyorum:

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

    }

İOS cihazlardaki kullanıcı aracıları, içinde iPhone veya iPad diyor. Ben sadece bu anahtar kelimelere göre filtre.

Modernizr testleri eklerken mümkün olan her yerde bir cihaz veya işletim sistemi yerine bir özellik için bir test eklemelisiniz. İPhone için tüm testleri on test eklemekle ilgili yanlış bir şey yoktur. Bazı şeyler özellik algılanamaz.

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

Örneğin, iPhone'da (iPad'de değil) video bir web sayfasında yerinde oynatılamaz, tam ekran açılır. Bu yüzden 'no-inpage-video' testi oluşturdum

(Modernizr bir sınıf ekler Daha sonra css kullanabilirsiniz .no-inpagevideoiçin <html>sınama başarısız olursa etiketi)

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

Bu, iPhone'daki videoyu gizleyecektir (bu durumda yaptığım şey, videoyu oynatmak için bir tıklama ile alternatif bir görüntü gösteriyor - sadece varsayılan video oynatıcı ve oynat düğmesinin gösterilmesini istemiyorum).

Vay canına, burada bir sürü uzunca zor kod var. Basit olsun lütfen!

Bu IMHO hızlı, tasarruf ve iyi çalışıyor:

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

• Regexp önce platform dizesinin ^ s katlama konumunu kontrol eder ve "iP" yoksa durur (yine de sonuna kadar uzun UA dizesini aramaktan daha hızlıdır)
• UA kontrolünden daha güvenlidir (navigator.platform'un daha az sahte olduğunu varsayarsak)
• İPhone / iPad Simülatörünü algılar

Daha işlevsel bir yaklaşım kullanarak ilk cevabı biraz güncelleyin.

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

Buradaki önceki yanıtların hiçbiri, iOS 13 dahil olmak üzere iOS'un tüm sürümlerindeki tüm büyük tarayıcılar için çalışmıyor. İşte tüm iOS sürümleri için Safari, Chrome ve Firefox için çalışan bir çözüm:

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

Bu kod snippet'inin özlüğe veya performansa değil, okunabilirliğe öncelikli olarak yazıldığını unutmayın.

Açıklama:

• Kullanıcı aracısı "iPod | iPhone | iPad" 'den herhangi birini içeriyorsa, cihaz açıkça iOS'tur. Aksi takdirde, devam edin ...

• "Macintosh" içermeyen başka herhangi bir kullanıcı aracısı bir Apple cihazı değildir ve bu nedenle iOS olamaz. Aksi takdirde, bir Apple cihazıdır, bu yüzden devam edin ...

• Eğer maxTouchPointsbir değere sahiptir 1ya da daha büyük ardından Apple cihaz dokunmatik ekrana sahip ve (söz için kikiwora şeref dokunmatik ekranlar ile hiçbir Mac'ler olmadığından bu nedenle iOS olmalıdır maxTouchPoints). Not maxTouchPointsolduğunu undefinedbiz bu senaryo için farklı bir çözüm gerek böylece, iOS 12 ve altında ...

• iOS 12 ve önceki sürümlerde Mac OS'de olmayan bir tuhaflık var. Tuhaflık, volumebir Audioöğenin özelliğinin dışında herhangi bir değere başarıyla ayarlanamamasıdır 1. Bunun nedeni, Apple'ın AudioiOS aygıtları için öğe üzerinde ses değişikliklerine izin vermemesi , ancak Mac OS için olmasıdır. Bu tuhaflık, bir iOS cihazını bir Mac OS cihazından ayırmak için son geri dönüş yöntemi olarak kullanılabilir.

Ayrıca kullanabilirsiniz includes

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

Benim durumumda, Ipad'de kullanıcı aracısı Mac OS ile aynı olduğu için kullanıcı aracısı yeterince iyi değildi, bu nedenle kötü bir numara yapmak zorunda kaldım:

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
}

İOS sürümünü algılamak için kullanıcı aracısını aşağıdaki gibi bir Javascript koduyla yapılandırmak gerekir:

 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;