ホームページ > ウェブフロントエンド > jsチュートリアル > iOS デバイス上でブラウザが実行されているかどうかを確実に検出するにはどうすればよいですか?

iOS デバイス上でブラウザが実行されているかどうかを確実に検出するにはどうすればよいですか?

Linda Hamilton
リリース: 2024-12-06 06:51:11
オリジナル
222 人が閲覧しました

How Can I Reliably Detect if a Browser is Running on an iOS Device?

iOS デバイスの識別

機能検出とは対照的に、この質問は、ブラウザが iOS デバイス上で動作しているかどうかを判断する方法を確立することを目的としています。機能検出の重要性にもかかわらず、関連するスタック オーバーフローのディスカッションで強調されているように、iOS デバイスを検出する必要性はビデオの独自の処理から生じます。

検出方法

デバイス検出の領域のナビゲート

  1. ユーザー エージェントの 2 つのアプローチに遭遇します。スニッフィング: このメソッドは、ブラウザのユーザー エージェント文字列を調べてデバイス タイプを識別します。ただし、このアプローチには潜在的な落とし穴があることに注意することが重要です。

    • ユーザー エージェントは、ユーザーまたはブラウザ拡張機能によって偽装される可能性があります。
    • iOS 13 iPad では、macOS と同じユーザー エージェントが表示されるようになりました。 13
  2. 機能推論: この手法は、さまざまな iOS バージョンの既知の機能利用可能タイムラインを利用します。たとえば、次のことがわかっています。

    • History API は iOS 4 で導入されました
    • matchMedia API は iOS 5 でデビューしました
    • webAudio API は iOS 6 で公開されました
    • iOS に WebSpeech API が登場7

注意: このアプローチは、これらの機能が将来の iOS バージョンで廃止されないという前提に基づいています。

検出

iOS デバイスを検出するには、次の方法を使用できます。コード:

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);
}
ログイン後にコピー

iOS のバージョンを検出するには、次のコードを使用できます (ただし、制限事項には注意してください):

function iOSversion() {

  if (iOS) {
    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 デバイス上でブラウザが実行されているかどうかを確実に検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート