Question

如果网站在ipad safari中运行或在应用程序WebView中运行，是否有办法通过javascript进行区分？

Answer 1

用户代理

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

Answer 2

这使用window.navigator.userAgent和window.navigator.standalone的组合。它可以区分与iOS网络应用程序相关的所有四种状态：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
};

Answer 3

我认为你可以使用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会说Safari/6531.22.7

<强>解决方案

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

Answer 4

呀：

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

Answer 5

我已尝试过所有这些解决方案，但在我的情况下没有工作，
我打算在Webview中检测Telegram。我注意到Safari正在将手机样式文本更改为与＆＃34; tel：＆＃34;前缀，所以我用它来编写这段代码，你可以测试一下：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>

Answer 6

Neoneye的解决方案不再起作用（见评论），可以简化。另一方面，仅测试UA中的“Safari”比ios手持设备要多得多。

这是我正在使用的测试：

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

Answer 7

请注意，此方法不适用于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工作得很好。

Answer 8

建议使用Modernizr，并检查indexeddb，如this。您可以使用用户代理配置（设备，操作系统，浏览器等）进行交叉检查，但更多建议使用纯功能检测。

Answer 9

我知道此代码将检查是否从添加到主屏幕的图标访问它：

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

但我不确定它会如何在UIWebView中作出反应。我能想到的唯一其他解决方案是获取用户代理或使用- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType并使用页面使用的内容替换您正在访问的页面的查询字符串，以识别它是从Web视图访问的。

Answer 10

上次我需要这个（JUST用于WebView），我使用了这个检查：

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

Answer 11

我找到了一个检测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
    }

Answer 12

Working 15.02.19

在iOS上检测网络视图的另一种解决方案是检查是否支持navigator.mediaDevices。

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

就我而言，我不需要捕获所有的Web视图，但是不需要捕获所有的Web视图（提醒：警报不会在Web视图中触发，因此请确保在dom中进行某些更改以进行调试））

Answer 13

尝试使用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)

Answer 14

我不认为你可以在客户端Javascript中使用任何具体的东西，但是如果你可以控制原始UIWebView可以做什么，你可能想要考虑使用它生成的用户代理字符串，并测试那在你的客户端Javascript而不是？我知道有点黑客攻击，但是嘿......这个问题可能会给调整用户代理提供一些指示：

Change User Agent in UIWebView (iPhone SDK)

Answer 15

@ Sod，好吧，我没有答案，但我不相信你为什么要检查，因为，浏览器引擎是否其Safari（浏览器）或应用程序将只与其Webkit相同，是应用程序可以配置浏览器引擎功能，例如，应用程序是否要运行JS或显示图像等...

我相信，您必须检查某些属性浏览器是否支持Flash，或浏览器是否显示图像，或者您可能想检查屏幕大小，

通过javascript检测ipad / iphone webview

15 个答案:

用户代理

检测码