web-dev-qa-db-ja.com

iOS 13以降でiPadおよびiPad OSのバージョンを検出する方法

IPhoneではiOS 13を検出できますが、iPad OS 13では検出できますnavigator.platformはMacIntelとして提供されます。したがって、以下のコードを使用してiPadを特定することはできませんが、iPhoneでは完全に機能します。

    if (/iP(hone|od|ad)/.test(navigator.platform)) {
            var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
            var version = [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
            return version;
    }

IPadのブラウザを使用してモバイルウェブサイトをリクエストした場合navigator.platformはiPadとして復帰し、完全に機能します。

iOS 13以降で実行されているiPad Javascriptを使用して識別する方法を誰かが提案できますか？

javascriptiosipadios13ipados13
13
MaDu_LK

それは簡単です-あなたはできません。このようなハックしか使用できません

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

「モバイル」の最初の条件、iPadがMacintosh Safariを模倣する2番目の条件。それは私にとっては確実に機能しますが、将来何が変わるかは誰にもわかりません。タッチスクリーン付きのMacがある場合は、デスクトップモードのiPadだけでなく、通常のMacも検出されます。

もう1つの方法は機能の検出です。これは可能ですが、ブラウザーの機能サポートに依存するべきではありません。たとえば、MacのSafariは日付ピッカーをサポートしていませんが、モバイルはサポートしています。

とにかく、私はあなたがプラットフォームの検出に頼らないようにすることをお勧めします（これはとにかく壊れます）そして代わりにModernizrとして機能の検出を使用してください（しかし異なるプラットフォームではありません）-日付ピッカーを使用したい場合、それがそうであるかどうか確認できます利用可能で、利用できない場合は、代わりにHTMLソリューションを使用してください。他のブラウザを使用しているという理由だけでユーザーをロックアウトしないでください。あなたは彼らに通知することができますが、通知を非表示にし、とにかくあなたのサイトを使用するオプションを彼らに与えてください。

ユーザーとして、誰かが別のブラウザーに行って使用するように言われたら嫌いです。

覚えておいてください。これらはすべてハッキングであるため、プラットフォームの検出はコードの悪臭を示します。

1
kikiwora

IPad OSとMac OS Catalinaでいくつかのデフォルトのブラウザー機能を利用するために、実装を少し拡張しました。さまざまなiPadと最近のすべてのiOSデバイスでの私のテストによると、これはうまく機能します。

let isIPadOs = function() {
return window.AuthenticatorAssertionResponse === undefined
        && window.AuthenticatorAttestationResponse === undefined
        && window.AuthenticatorResponse === undefined
        && window.Credential === undefined
        && window.CredentailsContainer === undefined
        && window.DeviceMotionEvent !== undefined
        && window.DeviceOrientationEvent !== undefined
        && navigator.maxTouchPoints === 5
        && navigator.plugins.length === 0
        && navigator.platform !== "iPhone";
}

要旨： https://Gist.github.com/braandl/f7965f62a5fecc379476d2c055838e36

1
braandl

それは少しハックで、確かに将来の安全性はそれほど高くありませんが、今のところ以下を使用しており、トリックを実行しているようです。

最初のブロックは古いiPadのユーザーエージェントをスニッフィングしているだけで、「OR」の後の2番目のブロックはプラットフォームがMacintoshでタッチポイントがあるかどうかをチェックしています。これを書いている時点では、Mac用の公式のタッチスクリーンはまだないので、しばらくはかなり安全でしょう。

if ((/\b(iPad)\b/.test(navigator.userAgent)
    && /WebKit/.test(navigator.userAgent)
    && !window.MSStream)
    || (navigator.platform === 'MacIntel'
    && navigator.maxTouchPoints
    && navigator.maxTouchPoints === 5)
  ) {
        return true;
    }
0
A.G.

WURFL.jsを使用できます。これは、使用中のデバイスを知りたいだけの場合は無料です。 https://web.wurfl.io/#wurfl-js

完全な開示、私はWURFLとImageEngineの背後にある会社のCOOですが、私も オープンソース開発者 です:)

WURFL.jsは、使用中のOSと、それがiPhoneかiPadかを通知します。

これを使用するには、次のコードをページのヘッドに追加するだけです。

<script type="text/javascript" src="//wurfl.io/wurfl.js"></script>

次に、JavaScriptでデバイス情報を使用できます。

console.log(WURFL.complete_device_name);

注： 有料バージョン を使用すると、より正確な結果を得ることができます（例：Apple iPhone XS Max、Apple iPad Pro 11）およびその他の多くのデバイス特性。

最初のペイントのデバイス情報が必要ない場合は、これを非同期で実行して、レンダリングをブロックしないようにすることもできます。本文の最後に貼り付けて、asyncまたはdeferを使用します。

<script type="text/javascript">
window.addEventListener('WurflJSDetectionComplete', () => {
   console.log(`Device: ${WURFL.complete_device_name}`);
});
</script>
<script type="text/javascript" src="//wurfl.io/wurfl.js" async></script>

その間、この改善されたデバイス情報を使用してGoogleアナリティクスを強化することもできます： https://www.scientiamobile.com/wurfljs-google-analytics-iphone/

他の回答とは異なり、これは開発者側の継続的なメンテナンスを必要としないことに注意してください。

0
SteveK