web-dev-qa-db-ja.com

ユーザーがモバイルSafariから移動したかどうかを判断する

私はアプリを持っていますが、ユーザーの移動元に基づいて、ユーザーを別のページにリダイレクトしたいと思います。

Webクリップから移動する場合は、リダイレクトしないでください。モバイルSafariから移動する場合は、safari.aspxにリダイレクトします。他の場所から移動する場合は、una​​vailable.aspxにリダイレクトします

iPhone WebAppsを使用できましたが、ロード方法を検出する方法はありますか？ Home Screen vs Safari？ ユーザーがWebクリップからナビゲートしているかどうかを判断しますが、ユーザーがiPhoneまたはiPodのモバイルSafariからナビゲートしたかどうかを判断するのに問題があります。

ここに私が持っているものがあります：

if (window.navigator.standalone) {
    // user navigated from web clip, don't redirect
}
else if (/*logic for mobile Safari*/) {
    //user navigated from mobile Safari, redirect to safari page
    window.location = "safari.aspx";
}
else {
    //user navigated from some other browser, redirect to unavailable page
    window.location = "unavailable.aspx";
}
javascriptiphonemobile-safariweb-clips
52
Steven

[〜＃〜] update [〜＃〜]：これは非常に古い回答であり、回答が受け入れられるため削除できません。より良い解決策については、 nwittingの答え を確認してください。

ユーザーエージェント 文字列の「iPad」または「iPhone」の部分文字列を確認できるはずです。

var userAgent = window.navigator.userAgent;

if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
   // iPad or iPhone
}
else {
   // Anything else
}
21
Daniel Vassallo

https://developer.chrome.com/multidevice/user-agent#chrome_for_ios_user_agent を参照してください-iOSのSafariおよびChromeは不便です同様：

Chrome

Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_1_1 like Mac OS X; en) AppleWebKit/534.46.0 (KHTML, like Gecko) CriOS/19.0.1084.60 Mobile/9B206 Safari/7534.48.3

サファリ

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3

ここでの最善のアプローチは、まず他の回答が示唆しているようにiOSをチェックし、次にSafari UAをユニークにするものでフィルタリングすることです。これは「AppleWebKitでありCriOSではない」で達成することをお勧めします：

var ua = window.navigator.userAgent;
var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
var webkit = !!ua.match(/WebKit/i);
var iOSSafari = iOS && webkit && !ua.match(/CriOS/i);
128
unwitting

ベストプラクティスは次のとおりです。

function isMobileSafari() {
    return navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/)
}
26
appsthatmatter

落下するコードはモバイルサファリのみを検出し、他には何も検出しません（イルカやその他の小さなブラウザを除く）

  (/(iPad|iPhone|iPod)/gi).test(userAgent) &&
  !(/CriOS/).test(userAgent) &&
  !(/FxiOS/).test(userAgent) &&
  !(/OPiOS/).test(userAgent) &&
  !(/mercury/).test(userAgent)
5
aWebDeveloper

すべての回答とコメントをマージしました。そして、これが結果です。

function iOSSafari(userAgent)
{
    return /iP(ad|od|hone)/i.test(userAgent) && /WebKit/i.test(userAgent) && !(/(CriOS|FxiOS|OPiOS|mercury)/i.test(userAgent));
}



var iOSSafari = /iP(ad|od|hone)/i.test(window.navigator.userAgent) && /WebKit/i.test(window.navigator.userAgent) && !(/(CriOS|FxiOS|OPiOS|mercury)/i.test(window.navigator.userAgent));
4
Константин Ван

すべての答えを見て、提案された正規表現に関するいくつかのヒントを以下に示します。

  • AppleWebKitはDesktop Safariにも一致します（モバイルだけでなく）
  • そのような単純な正規表現に対して.matchを複数回呼び出す必要はなく、より軽い.testメソッドを優先します。
  • g（グローバル）正規表現フラグは役に立ちませんが、i（大文字と小文字を区別しない）は便利です
  • キャプチャ（括弧）の必要はありません。文字列をテストするだけです。

モバイル用にtrueを取得するChromeは私には問題ありません（同じ動作）：

/iPhone|iPad|iPod/i.test(navigator.userAgent)

（デバイスがiOSアプリのターゲットかどうかを検出したいだけです）

3
antoine129

@unwittingの答えを支持しました。ただし、iOS WebビューでSPAをレンダリングするときは、少し調整する必要がありました。

function is_iOS () {
    /*
        Returns whether device agent is iOS Safari
    */
    var ua = navigator.userAgent;
    var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
    var webkitUa = !!ua.match(/WebKit/i);

    return typeof webkit !== 'undefined' && iOS && webkit && !ua.match(/CriOS/i);
};

主な違いは、SPAとUIView間のメッセージハンドラとして使用されるルートwebkitオブジェクトとの衝突を防ぐために、webkitUaをwebkitに名前変更することです。

1
pim

実際、モバイルサファリを検出する特効薬はありません。モバイルサファリのユーザーエージェントのキーワードを使用するブラウザはかなりあります。機能の検出を試みて、ルールを更新し続けることができます。

1
Light

私はこれが古いスレッドであることを知っていますが、皆さんと私のソリューションを共有したいと思います。

ユーザーがデスクトップサファリからナビゲートするタイミングを検出する必要がありました（2017年中頃であり、Appleはまだinput[type="date"]をサポートしていません...

だから、私はそれのためのフォールバックカスタムデートピッカーを作りました）。ただし、その入力タイプはモバイルSafariで正常に機能するため、デスクトップのサファリにのみ適用されます。そこで、この正規表現を作成してデスクトップSafariのみを検出しました。既にテストしており、Opera、Chrome、Firefox、Safari Mobileとは一致しません。

それが皆さんの何人かを助けるかもしれないことを願っています。

if(userAgent.match(/^(?!.*chrome).(?!.*mobile).(?!.*firefox).(?!.*iPad).(?!.*iPhone).*safari.*$/i)){
  $('input[type="date"]').each(function(){
    $(this).BitmallDatePicker();
  })
}
0
edd2110

私はこの答えを探していましたが、これに出くわしたことを思い出しました。

JavaScriptでiOS上のSafariを検出する最も信頼できる方法は

if (window.outerWidth === 0) {
    // Code for Safari on iOS
} 

or 

if (window.outerHeight === 0) {
    // Code for Safari on iOS
}

何らかの理由で、iOSのSafariはwindow.outerHeightプロパティとwindow.outerWidthプロパティに対して0を返します。

これは、iOSのすべてのバージョンのすべてのiPadおよびiPhone用です。他のすべてのブラウザーとデバイスでは、このプロパティは正常に機能します。

彼らがこれを変更するつもりかどうかはわかりませんが、今のところはうまくいきます。

0
naeluh
function isIOS {
  var ua = window.navigator.userAgent;
  return /(iPad|iPhone|iPod).*WebKit/.test(ua) && !/(CriOS|OPiOS)/.test(ua);
}
0
Kugutsumen