JavaScriptを介してiPad / iPhone WebViewを検出する

Question 1

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

Question 2

これは、の組み合わせを使用window.navigator.userAgentしてwindow.navigator.standalone。iOS Webアプリに関連する4つの状態すべてを区別できます。サファリ（ブラウザー）、スタンドアロン（フルスクリーン）、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
};

Question 3

ユーザーエージェント

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

Question 4

そのまま使用できると思いますUser-Agent。

更新

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/6531.22.7

解決

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

Question 5

うん：

// 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);

Question 6

これらのソリューションをすべて試しましたが、私の場合
はうまくいきませんでした。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>

Question 7

Neoneyeのソリューションは機能しなくなり（コメントを参照）、簡略化できます。一方、UAで「Safari」のみをテストすると、iOSハンドヘルドデバイスよりもはるかに多くのアドレスが指定されます。

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

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

Question 8

このアプローチは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デバイス用のコードを拡張することもできます。これでうまくいくはずです。

テレグラム、Facebook、VK Webビューでうまく機能しました。

Question 9

Working 15.02.19

iOSでWebビューを検出する別のソリューションは、のサポート/存在を確認することですnavigator.mediaDevices。

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

私の場合、すべてのWebviewをキャッチする必要はありませんでしたが、カメラ/マイク入力をサポートしていないもの（注意：Webviewではアラートはトリガーされないため、デバッグのためにdomで何かを変更してください）

Question 10

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

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

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

Question 11

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

Question 12

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

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

Question 13

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
    }

Question 14

IOS 13で試す

      function mobileDetect() {


    var agent = window.navigator.userAgent;
    var d = document;
    var e = d.documentElement;
    var g = d.getElementsByTagName('body')[0];
    var deviceWidth = window.innerWidth || e.clientWidth || g.clientWidth;

    // Chrome
    IsChromeApp = window.chrome && chrome.app && chrome.app.runtime;

    // iPhone
    IsIPhone = agent.match(/iPhone/i) != null;

    // iPad up to IOS12
    IsIPad = (agent.match(/iPad/i) != null) || ((agent.match(/iPhone/i) != null) && (deviceWidth > 750)); // iPadPro when run with no launch screen can have error in userAgent reporting as an iPhone rather than an iPad. iPadPro width portrait 768, iPhone6 plus 414x736 but would probably always report 414 on app startup

    if (IsIPad) IsIPhone = false;

    // iPad from IOS13
    var macApp = agent.match(/Macintosh/i) != null;
    if (macApp) {
        // need to distinguish between Macbook and iPad
        var canvas = document.createElement("canvas");
        if (canvas != null) {
            var context = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
            if (context) {
                var info = context.getExtension("WEBGL_debug_renderer_info");
                if (info) {
                    var renderer = context.getParameter(info.UNMASKED_RENDERER_WEBGL);
                    if (renderer.indexOf("Apple") != -1) IsIPad = true;
                }
                ;
            }
            ;
        }
        ;
    }
    ;

    // IOS
    IsIOSApp = IsIPad || IsIPhone;

    // Android
    IsAndroid = agent.match(/Android/i) != null;
    IsAndroidPhone = IsAndroid && deviceWidth <= 960;
    IsAndroidTablet = IsAndroid && !IsAndroidPhone;



    message = ""


    if (IsIPhone) {

        message = "Device is IsIPhone"


    }
    else if (IsIPad) {

        message = "Device is ipad"

    } else if (IsAndroidTablet || IsAndroidPhone || IsAndroid) {

        message = "Device is Android"


    } else {

        message = "Device is Mac ||  Windows Desktop"

    }


    return {

        message: message,

        isTrue: IsIOSApp || IsAndroid || IsAndroidTablet || IsAndroidPhone

    }

}



const checkMobile = mobileDetect()

alert(checkMobile.message + "  =====>  " + checkMobile.isTrue)

Question 15

クライアント側のJavascriptで使用できるものは特にないと思いますが、元のUIWebViewが実行できることを制御できる場合は、それが生成するユーザーエージェント文字列を試してみて、それをテストすることを検討してください。代わりにクライアント側のJavascript？私が知っている少しハックですが、ちょっと…この質問は、ユーザーエージェントを微調整する上でいくつかの指針を与えるかもしれません：

UIWebView（iPhone SDK）でユーザーエージェントを変更する

Question 16

@ Sod、まあ、答えはありませんが、なぜ確認したいのか確信が持てません。ブラウザエンジンのサファリ（Browser）とアプリケーションのどちらがWebkitと同じかだけなので、はいアプリケーションは次のようなブラウザエンジン機能を設定できます、アプリケーションがJSまたはDisplay Imageなどを実行したいかどうか…

ブラウザでサポートされているFlashかどうか、ブラウザが画像を表示するかどうか、またはおそらく画面サイズを確認する必要があるかどうか、特定のプロパティを確認する必要があると思います。