ฉันสงสัยว่าเป็นไปได้หรือไม่ที่จะตรวจพบว่าเบราว์เซอร์นั้นทำงานบน iOS หรือไม่เหมือนกับวิธีที่คุณสามารถตรวจจับคุณสมบัติด้วย Modernizr (แม้ว่าจะเป็นการตรวจจับอุปกรณ์ที่ชัดเจนมากกว่าการตรวจจับคุณสมบัติ)

ปกติฉันจะชอบการตรวจจับคุณสมบัติแทน แต่ฉันต้องค้นหาว่าอุปกรณ์เป็น iOS เพราะวิธีที่พวกเขาจัดการวิดีโอตามคำถามนี้หรือไม่YouTube API ไม่ทำงานกับอุปกรณ์ iPad / iPhone / ไม่ใช่ Flash

กำลังตรวจจับ iOS

ฉันไม่ใช่แฟนของ User Agent ที่ดมกลิ่น แต่นี่คือวิธีที่คุณจะทำ:

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

อีกวิธีหนึ่งคือการพึ่งพาnavigator.platform:

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

iOSจะเป็นอย่างใดอย่างหนึ่งtrueหรือfalse

ทำไมไม่ MSStream

Microsoft ฉีดคำว่าiPhoneใน IE11 userAgentเพื่อที่จะพยายาม Gmail อย่างใดอย่างหนึ่ง ดังนั้นเราต้องแยกมันออก ข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ที่นี่และที่นี่

ด้านล่างเป็นการอัปเดตของ IE11 userAgent(Internet Explorer สำหรับ Windows Phone 8.1 Update):

Mozilla / 5.0 (มือถือ; Windows Phone 8.1; Android 4.0; ARM; Trident / 7.0; Touch; rv: 11.0; IEMobile / 11.0; NOKIA; Lumia 930) เช่น iPhone OS 7_0_3 Mac OS X AppleWebKit / 537 (KHTML เช่น Gecko) มือถือ Safari / 537

เพิ่มอุปกรณ์ได้ง่ายขึ้นโดยไม่ต้องใช้นิพจน์ปกติ:

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()จะเป็นอย่างใดอย่างหนึ่งtrueหรือfalse

หมายเหตุ:ทั้งสองnavigator.userAgentและnavigator.platformสามารถแกล้งโดยผู้ใช้หรือส่วนขยายเบราว์เซอร์

กำลังตรวจหาเวอร์ชั่น iOS

วิธีที่ใช้กันมากที่สุดของการตรวจสอบเวอร์ชัน iOS ของคุณคือการแยกจากสตริงตัวแทนผู้ใช้ แต่ยังมีการอนุมานการตรวจจับคุณสมบัติ* ;

เรารู้ถึงข้อเท็จจริงที่history APIนำมาใช้ในiOS4 - matchMedia APIในiOS5 - webAudio APIในiOS6 - WebSpeech APIในiOS7และอื่น ๆ ..

หมายเหตุ:รหัสต่อไปนี้ไม่น่าเชื่อถือและจะแตกถ้าคุณลักษณะ HTML5 เหล่านี้ถูกคัดค้านใน iOS เวอร์ชันที่ใหม่กว่า คุณได้รับการเตือน!

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

หลังจาก iOS 13 คุณควรตรวจจับอุปกรณ์ iOS เช่นนี้เนื่องจาก iPad จะไม่ถูกตรวจพบว่าเป็นอุปกรณ์ iOS ด้วยวิธีเก่า (เนื่องจากตัวเลือก "เดสก์ท็อป" ใหม่ซึ่งเปิดใช้งานตามค่าเริ่มต้น):

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

เงื่อนไขแรกสำหรับ iOS <13 หรือ iPhone หรือ iPad ที่ปิดใช้งานโหมดเดสก์ท็อปเงื่อนไขที่สองสำหรับ iPadOS 13 ในการกำหนดค่าเริ่มต้นเนื่องจากวางตำแหน่งตัวเองเช่น Macintosh Intel แต่จริงๆแล้วเป็น Macintosh เดียวที่มีมัลติทัช

ค่อนข้างแฮ็คมากกว่าทางออกที่แท้จริง แต่ทำงานได้อย่างน่าเชื่อถือสำหรับฉัน

ป.ล.ตามที่กล่าวไว้ก่อนหน้านี้คุณอาจเพิ่มการตรวจสอบ IE

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

ชุดนี้ตัวแปร_iOSDeviceที่จะเป็นจริงหรือเท็จ

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

หากคุณใช้Modernizrคุณสามารถเพิ่มการทดสอบแบบกำหนดเองได้

ไม่สำคัญว่าคุณจะเลือกใช้โหมดตรวจจับแบบใด (userAgent, navigator.vendor หรือ navigator.platform) คุณสามารถสรุปได้เพื่อการใช้งานที่ง่ายขึ้นในภายหลัง

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

มีการทดสอบ Modernizr ที่กำหนดเองนี้: https://gist.github.com/855078

เวอร์ชันที่เรียบง่ายและง่ายต่อการขยาย

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

อาจเป็นการตอบรับที่คุ้มค่าว่า iPads ที่ใช้ iOS 13 จะถูกnavigator.platformตั้งค่าไว้MacIntelซึ่งหมายความว่าคุณจะต้องหาวิธีอื่นในการตรวจหาอุปกรณ์ iPadOS

ฉันเขียนสิ่งนี้เมื่อสองสามปีก่อน แต่ฉันเชื่อว่ายังใช้งานได้:

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

    }

ตัวแทนผู้ใช้บนอุปกรณ์ iOS พูดถึง iPhone หรือ iPad ฉันแค่กรองตามคำหลักเหล่านั้น

เมื่อใดก็ตามที่เป็นไปได้เมื่อเพิ่มการทดสอบ Modernizr คุณควรเพิ่มการทดสอบสำหรับคุณสมบัติมากกว่าอุปกรณ์หรือระบบปฏิบัติการ ไม่มีอะไรผิดปกติกับการเพิ่มสิบการทดสอบทั้งหมดสำหรับ iPhone หากเป็นไปได้ ตรวจพบคุณสมบัติบางอย่างไม่ได้

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

ตัวอย่างเช่นบน iPhone (ไม่ใช่ iPad) วิดีโอไม่สามารถเล่นแบบอินไลน์บนเว็บเพจมันจะเปิดขึ้นเต็มหน้าจอ ดังนั้นฉันจึงสร้างการทดสอบ 'no-inpage-video'

จากนั้นคุณสามารถใช้สิ่งนี้ใน css (Modernizr เพิ่มคลาส.no-inpagevideoให้กับ<html>แท็กหากการทดสอบล้มเหลว)

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

นี่จะเป็นการซ่อนวิดีโอบน iPhone (สิ่งที่ฉันทำในกรณีนี้คือการแสดงภาพทางเลือกด้วยการคลิกเพื่อเล่นวิดีโอ - ฉันไม่ต้องการให้เครื่องเล่นวิดีโอเริ่มต้นและปุ่มเล่นปรากฏขึ้น)

ว้าวรหัสเล่ห์เหลี่ยมจำนวนมากที่นี่ ทำให้มันง่ายหน่อย!

อันนี้ IMHO รวดเร็วประหยัดและทำงานได้ดี:

 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 ตรวจสอบตำแหน่งของ tarting ^ของสตริงแพลตฟอร์มก่อนและหยุดหากไม่มี "iP" (เร็วกว่าการค้นหาสตริง UA ที่ยาวจนถึงตอนท้าย)
• ปลอดภัยกว่าการตรวจสอบ UA (สมมติว่า navigator.platform มีโอกาสปลอมน้อยกว่า)
• ตรวจจับ iPhone / iPad Simulator

อัปเดตคำตอบแรกเล็กน้อยโดยใช้วิธีการทำงานที่มากขึ้น

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

ไม่มีคำตอบก่อนหน้านี้ที่นี่ทำงานได้กับเบราว์เซอร์ที่สำคัญทั้งหมดใน iOS ทุกรุ่นรวมถึง iOS 13 นี่คือโซลูชันที่ใช้งานได้กับ Safari, Chrome และ Firefox สำหรับ 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()));
})();

โปรดทราบว่าข้อมูลโค้ดนี้เขียนขึ้นโดยให้ความสำคัญกับความสามารถในการอ่านไม่ใช่ความรัดกุมหรือประสิทธิภาพ

คำอธิบาย:

• หากตัวแทนผู้ใช้มี "iPod | iPhone | iPad" ใด ๆ แสดงว่าอุปกรณ์นั้นเป็น iOS มิฉะนั้นดำเนินการต่อ ...

• ตัวแทนผู้ใช้อื่น ๆ ที่ไม่มี "Macintosh" ไม่ใช่อุปกรณ์ Apple และไม่สามารถเป็น iOS ได้ ไม่เช่นนั้นเป็นอุปกรณ์ Apple ดังนั้นดำเนินการต่อ ...

• หากmaxTouchPointsมีค่า1หรือมากกว่านั้นอุปกรณ์ Apple จะมีหน้าจอสัมผัสและต้องเป็น iOS เนื่องจากไม่มี Mac ที่มีหน้าจอสัมผัส (รุ่งโรจน์ถึง kikiwora เพื่อกล่าวถึงmaxTouchPoints) ทราบว่าmaxTouchPointsเป็นundefinedสำหรับ iOS ต่ำกว่า 12 ปีดังนั้นเราจึงต้องแก้ปัญหาที่แตกต่างกันสำหรับสถานการณ์สมมติว่า ...

• iOS 12 และต่ำกว่ามีมุมแหลมที่ไม่มีอยู่ใน Mac OS สิ่งที่volumeแปลกประหลาดคือคุณสมบัติของAudioองค์ประกอบไม่สามารถตั้งค่าเป็นค่าอื่น1ได้ นี่เป็นเพราะ Apple ไม่อนุญาตการเปลี่ยนแปลงระดับเสียงของAudioองค์ประกอบสำหรับอุปกรณ์ iOS แต่ทำขึ้นสำหรับ Mac OS การเล่นโวหารนั้นสามารถใช้เป็นวิธีสำรองทางเลือกสุดท้ายสำหรับการแยกอุปกรณ์ iOS ออกจากอุปกรณ์ Mac OS

คุณยังสามารถใช้ includes

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

ในกรณีของฉันตัวแทนผู้ใช้ไม่ดีพอเนื่องจากใน Ipad ตัวแทนผู้ใช้เหมือนกับใน Mac OS ดังนั้นฉันต้องทำเคล็ดลับที่น่ารังเกียจ:

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
}

ในการตรวจสอบเวอร์ชัน iOS หนึ่งจะต้องปรับโครงสร้างตัวแทนผู้ใช้ด้วยรหัส Javascript ดังนี้:

 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;