web-dev-qa-db-ja.com

JavaScriptを介してipad / iphone webviewを検出する

WebサイトがiPadサファリ内またはアプリケーションWebView内で実行されている場合、javascriptを介して異なる方法はありますか？

javascriptipadioswebview
87
sod

これは、window.navigator.userAgentとwindow.navigator.standaloneの組み合わせを使用します。 iOS Webアプリに関連する4つの状態すべてを区別できます：safari（ブラウザー）、スタンドアロン（フルスクリーン）、uiwebview、およびiOSではありません。

デモ： http://jsfiddle.net/ThinkingStiff/6qrbn/

var standalone = window.navigator.standalone,
    userAgent = window.navigator.userAgent.toLowerCase(),
    safari = /safari/.test( userAgent ),
    ios = /iphone|iPod|ipad/.test( userAgent );

if( ios ) {
    if ( !standalone && safari ) {
        //browser
    } else if ( standalone && !safari ) {
        //standalone
    } else if ( !standalone && !safari ) {
        //uiwebview
    };
} else {
    //not iOS
};
74
ThinkingStiff

ユーザーエージェント

UIWebViewで実行

Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/98176

IPadのSafariで実行する

Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B176 Safari/7534.48.3

Mac OS XのSafariで実行する

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.55.3 (KHTML, like Gecko) Version/5.1.5 Safari/534.55.3

Mac OS XでChromeで実行

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.151 Safari/535.19

Mac OS XのFireFoxで実行する

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:11.0) Gecko/20100101 Firefox/11.0

検出コード

var is_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
var is_safari_or_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit/i.test(navigator.userAgent);
76
neoneye

User-Agentだけを使用できると思います。

[〜＃〜] update [〜＃〜]

IPhone Safariを使用して閲覧したページ

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7

UIWebViewを使用してすぐに試してみます

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Mobile/8B117

違いは、SafariがSafari/6531.22.7と言うことです

ソリューション

var isSafari = navigator.userAgent.match(/Safari/i) != null;
10
Nicolas S

うん：

// is this an IPad ?
var isiPad = (navigator.userAgent.match(/iPad/i) != null);

// is this an iPhone ?
var isiPhone = (navigator.userAgent.match(/iPhone/i) != null);

// is this an iPod ?
var isiPod = (navigator.userAgent.match(/iPod/i) != null);
7
John Doherty

これらすべてのソリューションを試しましたが、私の場合はうまくいきませんでした。
Webview内で Telegram を検出しようとしていました。 Safariが電話スタイルのテキストを「tel：」プレフィックスの付いたリンクに変更していることに気づいたので、これを使用してこのコードを記述しました。テストできます： jsfiddle

<!DOCTYPE html>
<html>
<head></head>
<body>
<ul id="phone" style="opacity:0">
    <li>111-111-1111</li>
</ul>
</body>
</html>

<script>

    var html = document.getElementById("phone").innerHTML;

    if (navigator.platform.substr(0,2) === 'iP') {

        if (html.indexOf('tel:') == -1)
            alert('not safari browser');
        else
            alert('safari browser');
    }
    else
        alert('not iOS');
</script>
4
Amir Khorsandi

Neoneyeのソリューションは機能しなくなり（コメントを参照）、簡素化できます。一方、UAで「Safari」のみをテストすると、iosハンドヘルドデバイスよりもはるかに多くのことを処理できます。

これは私が使用しているテストです：

var is_ios = /(iPhone|iPod|iPad).*AppleWebKit.*Safari/i.test(navigator.userAgent);
2
eosphere

このアプローチはiOS 10以前のバージョンでは機能しないことに注意してください。

2018年の春には、提案された方法はどれもうまくいきませんでしたので、新しいアプローチを思い付きました（userAgentベースではありません）：

const hasValidDocumentElementRatio =
  [ 320 / 454 // 5, SE
  , 375 / 553 // 6, 7, 8
  , 414 / 622 // 6, 7, 8 Plus
  , 375 / 812 // X
  , 414 / 896 // Xs, Xr
  ].some(ratio =>
    ratio === document.documentElement.clientWidth / 
      document.documentElement.clientHeight
  )

const hasSafariInUA = /Safari/.test(navigator.userAgent)

const isiOSSafari = hasSafariInUA && hasValidDocumentElementRatio  // <- this one is set to false for webviews

https://Gist.github.com/BorisChumichev/7c0ea033daf33da73306a396ffa174d1

IPadデバイス用のコードを拡張することも歓迎します。これでうまくいくと思います。

Telegram、Facebook、VK webviewsでうまく機能しました。

2
Boris Chumichev

前回（WebViewの目的でのみ）これが必要だったとき、このチェックを使用しました。

function isIOS() {
     return !/safari/.test( window.navigator.userAgent.toLowerCase()) || navigator.platform === 'iOS' || navigator.platform === 'iPhone';
}
0
CatalinBerta

Working 15.02.19

IOSでWebビューを検出する別のソリューションは、navigator.mediaDevices。

if (navigator.mediaDevices) {
    alert('has mediaDevices');
} else {
    alert('has no mediaDevices');
}

私の場合、すべてのウェブビューをキャッチする必要はありませんでしたが、カメラ/マイク入力をサポートしていないウェブビューをキャッチします（注意：ウェブビューではアラートはトリガーされません。

0
vinni

このコードは、ホーム画面に追加されたアイコンからアクセスされているかどうかを確認します：

_if (window.navigator.standalone == true) {
//not in safari
}
_

しかし、UIWebViewでどのように反応するかはわかりません。私が考えることができる他の唯一の解決策は、ユーザーエージェントを取得するか、- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationTypeを使用し、アクセスしているページのクエリ文字列を、Webビューからアクセスされていることを識別するためにページが使用するもので置き換えることです。

0
Preston

Modernizr を使用し、 this のようなindexeddbを確認することをお勧めします。ユーザーエージェントの構成（デバイス、OS、ブラウザーなど）とクロスチェックできますが、純粋な機能の検出がより推奨されるようです。

0
jiku

IPhoneまたはiPadを検出する簡単なソリューションを見つけました。これは私には問題ありません。

var is_iPad = navigator.userAgent.match(/iPad/i) != null;
var is_iPhone = navigator.userAgent.match(/iPhone/i) != null;
    if(is_iPad || is_iPhone == true){
        //perform your action
    }
0
Vijay Dhanvai