web-dev-qa-db-ja.com

JavaScriptでiOS 13を検出する方法は？

この機能を使用してiOSを検出します

export function isiOS() {
  return navigator.userAgent.match(/ipad|iphone/i);
}

iOS13 +を検出させる方法はありますか？ありがとう

なぜ必要なのですか？通常、iOSサファリはファイルをダウンロードできないため、画像をダウンロード可能にするには、次のようにレンダリングする必要があります

<img src={qrImage} alt="creating qr-key..." />

ただし、Android/PCおよびその他のほとんどすべての場所で、直接実行できます。

<a href={qrImage} download="filename.png">
    <img src={qrImage} alt="qr code" />
</a>

ユーザーは画像を押してダウンロードするだけです。 iOS13でオンにすると、2番目のオプションが機能しますが、最初のオプションは機能しなくなります。

iosiphonesafariuser-agentios13
2
lebed2045

ユーザーエージェントからオペレーティングシステムまたはブラウザを検出しないようにアドバイスします。それらは、そのためのAPIよりも変更の影響を受けやすいためです 信頼できる安定した標準APIがリリースされるまで 。この2番目の部分がいつ発生するかはわかりません。

ただし、該当する場合は、代わりに検出機能を提案できます。

_anchor html element_がdownload属性をサポートしているかどうかを確認できます。

"download" in document.createElement("a") // true in supporting browsers false otherwise

そうすることで、各ケースの出力に応じて適切なhtmlマークアップをdisplayできます。そのような何かが役立つかもしれません：

_function doesAnchorSupportDownload() {
  return "download" in document.createElement("a")
}
// or in a more generalized way:
function doesSupport(element, attribute) {
  return attribute in document.createElement(element)
}

document.addEventListener("DOMContentLoaded", event => {
  if (doesAnchorSupportDownload()) {
    anchor.setAttribute("display", "inline"); // your anchor with download element. originally display was none. can also be set to another value other than none.
  } else {
    image.setAttribute("display", "inline"); // your alone image element.  originally display was none. can also be set to another value other than none.
  }
});
_

たとえば、arクイックルックをサポートするブラウザーiOSを使用しているかどうかを検出するには、次のコードを使用します。

_function doesSupportAnchorRelAR() {
  return document.createElement("a").relList.supports("ar");
}
_

以下に記載されているテクニックを使用することもできます： http://diveinto.html5doctor.com/detect.html#techniques

2
Selçuk

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)];
}

ユーザーがブラウザーを使用してモバイルWebサイトを要求した場合navigator.platformはiPadとして戻り、完全に機能します。

1
MaDu_LK

これを見てください Link 。

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

    ver = iOSversion();

    if (ver[0] >= 13) {
        alert('This is running iOS '+ver);
    }
});
0
Mirzohid Akbarov