webentwicklung-frage-antwort-db.com.de

ipad/iphone webview über Javascript erkennen

Gibt es eine Möglichkeit, über Javascript zu unterscheiden, wenn die Website in der iPad-Safari oder in einer WebView-Anwendung ausgeführt wird?

82
sod

Dies verwendet eine Kombination aus window.navigator.userAgent und window.navigator.standalone. Es kann zwischen allen vier Status einer iOS-Web-App unterscheiden: Safari (Browser), Standalone (Vollbild), uiwebview und nicht iOS.

Demo: 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
};
71
ThinkingStiff

Benutzeragenten

Wird in UIWebView ausgeführt

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

Läuft in Safari auf dem iPad

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

Läuft in Safari unter Mac OS X

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

Läuft in Chrome unter Mac OS X

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

Wird in FireFox unter Mac OS X ausgeführt

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

Erkennungscode

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

Ich denke, dass Sie einfach den User-Agent verwenden können.


UPDATE

Diese Seite wurde mit iPhone Safari durchsucht 

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

Ich werde es gleich mit UIWebView versuchen

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

Der Unterschied ist, dass der Safari-Code Safari/6531.22.7 sagt


Lösung

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

Ja:

// 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);
6
John Doherty

Ich habe alle diese Lösungen ausprobiert, aber in meinem Fall nicht funktioniert,
Ich wollte Telegramm in Webview erkennen. Ich habe bemerkt, dass Safari den Text im Telefonstil in einen Link mit dem Präfix "tel:" ändert. Sie können es testen: 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

Beachten Sie, dass dieser Ansatz für iOS 10 und ältere Versionen nicht funktioniert.

Im Frühjahr 2018 funktionierte keine der vorgeschlagenen Methoden für mich. Daher kam ich zu einem neuen Ansatz (der nicht auf Benutzeragenten basiert):

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

Sie können den Code auch für iPad-Geräte erweitern. Ich denke, er sollte den Trick tun.

Funktionierte gut für Telegramm-, Facebook- und VK-Webviews.

2
Boris Chumichev

Die Lösung von Neoneye funktioniert nicht mehr (siehe Kommentare) und kann vereinfacht werden. __ Wenn Sie dagegen nur "Safari" in der UA testen, spricht dies weitaus mehr als die Handheld-Geräte von ios.

Dies ist der Test, den ich verwende:

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

Ich würde vorschlagen, Modernizr zu verwenden und nach Indexeddb wie this zu suchen. Sie können dies mit der Benutzeragenten-Konfiguration (Gerät, Betriebssystem, Browser usw.) abgleichen. Die reine Funktionserkennung scheint jedoch zu empfehlen.

1
jiku

Das letzte Mal, als ich das brauchte (nur für WebView-Zwecke), habe ich diese Überprüfung verwendet:

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

Working 15.02.19

Eine andere Lösung zum Erkennen von Webviews unter iOS ist die Überprüfung auf Unterstützung/Vorhandensein von navigator.mediaDevices.

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

In meinem Fall musste ich nicht alle Webviews abrufen, aber diejenigen, die keine Kamera-/Mikrofoneingabe unterstützen (Erinnerung: Alarme werden nicht in Webview ausgelöst. Ändern Sie daher unbedingt den Dom für Debug-Zwecke.)

0
vinni

Ich weiß, dass dieser Code überprüft, ob auf ein Symbol zugegriffen wird, das auf dem Startbildschirm hinzugefügt wird:

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

ich bin mir jedoch nicht sicher, wie es in einem UIWebView reagieren würde. Die einzige andere Lösung, an die ich denken könnte, ist das Abrufen des Benutzeragenten oder die Verwendung von - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType und das Ersetzen der Abfragezeichenfolge der Seite, auf die Sie zugreifen, durch etwas, das von der Seite verwendet wird, um zu identifizieren, dass von einer Webansicht aus darauf zugegriffen wird.

0
Preston

Ich habe eine einfache Lösung gefunden, um iPhone oder iPad zu erkennen. Das funktioniert gut für mich.

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