web-dev-qa-db-ja.com

デバイスがiOSかどうかを検出

Modernizrによる機能検出の方法と同じように、ブラウザがiOS上で実行されているかどうかを検出することが可能かどうか疑問に思います（これは機能検出よりもむしろデバイス検出です）。

通常私は代わりに機能検出を好むでしょう、しかし私はデバイスがこの質問のようにビデオを扱う方法のためにiOSであるかどうか調べる必要があります フラッシュデバイス

javascriptiosbrowserbrowser-feature-detection
344
SparrwHawk

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は、何らかの方法でGmailを欺こうとするために、IE11のuserAgentにWordiPhoneを挿入しました。したがって、除外する必要があります。これに関する詳細情報 here および here 。

IE11の更新されたuserAgent（Windows Phone 8.1更新用Internet Explorer）は次のとおりです。

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 （Keck、Geckoなど）Mobile 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 iniOS5-webAudio API iniOS6-WebSpeech API iniOS7など..

注：次のコードは信頼性がなく、これらの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';
}
744
Pierre

これは、変数_iOSDeviceを true または false に設定します。

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

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

このカスタムModernizrテストがあります： https://Gist.github.com/855078

8
sgt9dg8s90

IOSデバイスのユーザーエージェントは、iPhoneまたはiPadと言っています。これらのキーワードに基づいてフィルタリングするだけです。

3
Bryan Naegele

単純化された、拡張しやすいバージョンです。

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

Modernizrテストを追加するときには可能な限り、デバイスやオペレーティングシステムではなく機能のテストを追加するべきです。それが必要なものであれば、10のテストをすべてiPhone用にテストを追加しても問題ありません。いくつかのことは、単に機能が検出できないことです。

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

たとえば、iPhoneでは（iPadではなく）ビデオをWebページ上でインラインで再生することはできません。フルスクリーンで表示されます。そこで私はテスト 'no-inpage-video'を作成しました

これをcssで使用できます（テストが失敗した場合、Modernizrはクラス.no-inpagevideoを<html>タグに追加します）。

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

これはiPhone上のビデオを隠すでしょう（この場合実際にやっているのはビデオを再生するためのクリックで代替画像を見せることです - 私はデフォルトのビデオプレーヤーと再生ボタンを見せたくありません）。

2
Simon_Weaver

私は数年前にこれを書いたが、私はそれがまだうまくいくと信じている：

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

    }
2
Michael Benin

うわー、ここでは長くてトリッキーなコードがたくさんあります。簡単にしてください。

これは私見高速で、保存し、うまく機能します。

 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);
  • 正規表現が最初に ^ s プラットフォーム文字列の開始位置をチェックし、 "iP"がない場合は停止するので高速です（とにかく長いUA文字列を検索するよりも高速です）
  • UAチェックより安全です（navigator.platformが偽造されている可能性が低いと想定します）。
  • IPhone/iPadシミュレータを検出
1
j.j.

より機能的なアプローチを使用して最初の答えを少し更新してください。

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

IOS 13を実行しているiPadではnavigator.platformがMacIntelに設定されるので、おそらく答える価値があります。つまり、iPadOSデバイスを検出する別の方法を見つける必要があるということです。

0
Justin Searls