510

Modernizr で機能を検出する方法と同様に、ブラウザーが iOS で実行されているかどうかを検出できるかどうか疑問に思っています (ただし、これは明らかに機能検出ではなくデバイス検出です)。

通常は代わりに機能検出を優先しますが、デバイスが iOS であるかどうかを確認する必要があるのは、この質問YouTube API が iPad / iPhone / 非フラッシュ デバイスで動作しないに従ってビデオを処理する方法のためです。

4

20 に答える 20

994

iOSの検出

iOS 13 iPadでは、ユーザーエージェントとプラットフォームの両方の文字列が変更され、iPadとMacOSを区別できるように思われるため、以下のすべての回答でそれを考慮する必要があります。

これは、iOS13もカバーする最短の代替手段である可能性があります。

function iOS() {
  return [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ].includes(navigator.platform)
  // iPad on iOS 13 detection
  || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
}

iOStrueまたは_false

悪いオプション：ユーザーエージェントのスニッフィング

ユーザーエージェントのスニッフィングはより危険であり、問​​題が頻繁に発生します。

iPad iOS 13では、ユーザーエージェントはMacOS 13コンピューターのユーザーエージェントと同じですが、 iPadを無視すると、しばらくの間は機能する可能性があります。

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

!window.MSStreamIE11を誤って検出しないようにするためです。こことここを参照してください。

注：navigator.userAgentとはnavigator.platform、ユーザーまたはブラウザ拡張機能によって偽造される可能性があります。

userAgentまたはプラットフォームを変更するためのブラウザー拡張機能が存在するのは、Webサイトが手間のかかる検出を使用し、ユーザーのブラウザーがその機能を使用できる場合でも、一部の機能を無効にすることが多いためです。

ユーザーとのこの競合をエスカレート解除するには、各ケースについて、Webサイトに必要な正確な機能を具体的に検出することをお勧めします。その後、ユーザーが必要な機能を備えたブラウザーを入手すると、追加のコード変更なしで既に機能します。

iOSバージョンの検出

iOSのバージョンを検出する最も一般的な方法は、ユーザーエージェントの文字列からiOSのバージョンを解析することです。しかし、特徴検出推論もあります* ;

iOS4、iOS5、iOS6 、iOS7などでhistory API導入された事実を知っています。matchMedia APIwebAudio APIWebSpeech API

注：次のコードは信頼性が低く、これらのHTML5機能のいずれかが新しいiOSバージョンで非推奨になると機能しなくなります。あなたは警告されました！

function iOSversion() {

  if (iOS) { // <-- Use the one here above
    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';
}
于 2012-01-27T20:51:26.633 に答える
18

これにより、変数_iOSDeviceがtrueまたはfalseに設定されます

_iOSDevice = !!navigator.platform.match(/iPhone|iPod|iPad/);
于 2013-08-08T19:03:46.743 に答える
14

ここでの以前の回答はどれも、iOS 13 を含むすべてのバージョンの iOS のすべての主要なブラウザーで機能しません。すべての iOS バージョンの Safari、Chrome、および Firefox で機能するソリューションを次に示します。

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 デバイスにはタッチ スクリーンがあり、タッチ スクリーンを備えた Mac がないため、iOS である必要があります (言及してくれた kikiwora に敬意を表しますmaxTouchPoints)。これmaxTouchPointsはundefinediOS 12 以下用であるため、そのシナリオには別のソリューションが必要です...

  • iOS 12 以下には、Mac OS にはない癖があります。奇妙な点はvolume、要素のプロパティをAudio以外の値に正常に設定できないことです1。これは、Apple がAudioiOS デバイスの要素でボリュームの変更を許可していないが、Mac OS では許可しているためです。この癖は、iOS デバイスと Mac OS デバイスを区別するための最終的なフォールバック方法として使用できます。

于 2020-05-29T21:20:55.927 に答える
8

単純化され、拡張が容易なバージョン。

var iOS = ['iPad', 'iPhone', 'iPod'].indexOf(navigator.platform) >= 0;
于 2014-03-18T00:20:13.077 に答える
2

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でビデオが非表示になります（この場合、実際に行っているのは、ビデオを再生するためのオンクリックで代替画像を表示することです-デフォルトのビデオプレーヤーと再生ボタンを表示したくないだけです）。

于 2014-05-10T19:23:18.670 に答える
2

数年前にこれを書きましたが、まだ機能していると思います：

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

    }
于 2012-12-05T04:24:17.227 に答える
-2

var isiOSSafari = (navigator.userAgent.match(/like Mac OS X/i)) ? true: false;

于 2013-02-12T17:45:43.270 に答える
-3

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;
    }
于 2012-02-19T16:05:06.140 に答える