development

기기가 iOS인지 감지

big-blog 2020. 2. 27. 22:24
반응형

기기가 iOS인지 감지


Modernizr로 기능을 감지하는 방법과 유사하게 브라우저가 iOS에서 실행 중인지 감지 할 수 있는지 궁금합니다 (기능 감지가 아닌 장치 감지 임에도 불구하고).

일반적으로 대신 기능 감지를 선호하지만이 질문에 따라 비디오를 처리하는 방식으로 인해 장치가 iOS인지 여부를 찾아야합니다. YouTube API는 iPad / iPhone / 비 플래시 장치에서 작동하지 않습니다.


iOS 감지

나는 사용자 에이전트 스니핑 팬이 아니지만 다음과 같이하십시오.

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 는 IE11에 iPhone 이라는 단어를 삽입하여 userAgent어떻게 든 Gmail을 시도했습니다. 따라서 제외해야합니다. 여기여기 에 대한 자세한 정보 .

아래는 IE11의 업데이트 된 내용입니다 userAgent(Windows Phone 8.1 용 Internet Explorer 업데이트).

iPhone OS와 같은 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) 7_0_3 Mac OS X AppleWebKit / 537 (Gecko와 같은 KHTML) 모바일 사파리 / 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.userAgentnavigator.platform사용자 또는 브라우저 확장에 의해 위조 할 수 있습니다.


iOS 버전 감지

iOS 버전을 감지하는 가장 일반적인 방법은 User Agent 문자열에서 파싱하는 것입니다 . 그러나 또한이 기능 감지 추론 * ;

우리는 사실을 알고 history API에 도입 된 iOS4 - matchMedia APIiOS5를 - webAudio APIiOS6의 - WebSpeech APIiOS7에 등등 ..

참고 : 다음 코드는 신뢰할 수 없으며 최신 iOS 버전에서 이러한 HTML5 기능이 더 이상 사용되지 않으면 중단됩니다. 경고를 받았습니다!

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

변수 _iOSDevicetrue 또는 false설정합니다.

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

와우, 여기에 길고 까다로운 코드가 많이 있습니다. 간단하게 해주세요.

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가 먼저 플랫폼 문자열 ^ s tarting 위치를 확인하고 "iP"가 없으면 중지합니다 (어쨌든 끝까지 긴 UA 문자열을 검색하는 것보다 빠름).
  • UA 검사보다 안전합니다 (navigator.platform이 가짜라고 가정합니다)
  • iPhone / iPad 시뮬레이터 감지

iOS 기기의 사용자 에이전트는 iPhone 또는 iPad라고 말합니다. 해당 키워드를 기준으로 필터링합니다.


나는 몇 년 전에 이것을 썼지 만 여전히 작동한다고 믿는다.

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

    }

Modernizr 테스트를 추가 할 때 가능하면 장치 나 운영 체제가 아닌 기능에 대한 테스트를 추가해야합니다. iPhone에 필요한 모든 테스트를 10 번 수행하면 문제가 없습니다. 일부 기능은 감지 할 수 없습니다.

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

예를 들어, iPhone (iPad 아님) 비디오는 웹 페이지에서 인라인으로 재생할 수 없으며 전체 화면으로 열립니다. 그래서 '비인 페이지 동영상'테스트를 만들었습니다.

그런 다음 CSS에서 이것을 사용할 수 있습니다 ( 테스트가 실패하면 Modernizr가 태그에 클래스 .no-inpagevideo추가 <html>합니다)

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

이것은 iPhone에서 비디오를 숨길 것입니다 (이 경우 실제로하는 것은 onclick을 사용하여 비디오를 재생하는 대체 이미지를 표시하는 것입니다-기본 비디오 플레이어 및 재생 버튼을 표시하고 싶지는 않습니다).


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입니다.

오히려 해킹 대신 실제 솔루션이지만 안정적으로 작동합니다.


보다 기능적인 접근 방식을 사용하여 첫 번째 답변을 약간 업데이트하십시오.

    const isIOS = [
      'iPad Simulator',
      'iPhone Simulator',
      'iPod Simulator',
      'iPad',
      'iPhone',
      'iPod',
    ]
      .map(device => navigator.platform === device)
      .filter(device => device)
      .reduce(() => true, false);

iOS 13을 실행하는 iPad가 (으)로 navigator.platform설정되어 MacIntel있으면 iPadOS 장치를 감지하는 다른 방법을 찾아야한다는 답변을받을 가치가 있습니다.


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;

참고 URL : https://stackoverflow.com/questions/9038625/detect-if-device-is-ios



반응형