détecter ipad/iphone webview via javascript

Est-il un moyen de différer via javascript si le site web fonctionne à l'intérieur de l'ipad safari ou à l'intérieur d'une application WebView?

Est-ce juste pour les appareils iOS?

InformationsquelleAutor sod | 2010-12-16

74

Il utilise une combinaison de window.navigator.userAgent et window.navigator.standalone. Il peut faire la distinction entre les quatre membres en ce qui concerne un iOS application web: safari (navigateur), autonome (plein écran), uiwebview, et pas iOS.

Démo: 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
};
```
- chrome a Safari dans le userAgent. il se comporte différemment à l'égard nécessitant webcal:// protocole de .fichiers ics
- Ce n'est pas de travail pour moi.
- pouvez-vous fournir plus d'informations ? Quelle a été votre appareil et de sa version iOS ?
- est-ce encore au travail?
InformationsquelleAutor ThinkingStiff
76

Les Agents Utilisateurs

Cours d'exécution dans UIWebView
```
Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/98176
```
Cours d'exécution dans Safari sur l'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
```
Cours d'exécution dans Safari sur 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
```
Cours d'exécution dans google Chrome sur 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
```
Cours d'exécution dans FireFox sur Mac OS X
```
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:11.0) Gecko/20100101 Firefox/11.0
```
Code De Détection
```
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);
```
- Vraiment. Je ne sais pas pourquoi, j'ai juste regardé les deux useragents moi-même en premier lieu. Merci pour votre réponse 🙂
- Ne fonctionne pas sur iPhone 5s/iOS 7, parce que les deux UIWebView et Safari ont Safari dans leur user agent
- Vous avez raison. Les essais contre Version par opposition à Safari a travaillé pour moi dans le dernier iOS.
- Pouvez-vous décrire exactement comment vous dire avec Version? Remplacez-vous Safari avec Version dans le var is_uiwebview ligne?
- À l'égard des chaînes d'agent utilisateur, en comparant les deux premières chaînes d'agent utilisateur ci-dessus (UIWebView, et Safari sur l'iPad) la UIWebView chaîne contient "version", alors que l'ipad, on ne répond pas. Votre but avec la modification de la regex n'est pas claire, et il semble que vous pourriez être à la recherche pour aider à l'écriture d'un.
- Serait bien d'ajouter WKWebView à cette liste. Dans mon iPhone simulator X c'est: Mozilla/5.0 (iPhone; CPU iPhone OS 11_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C107
InformationsquelleAutor neoneye
10

Je pense que vous pouvez simplement utiliser le User-Agent.

Mise à JOUR

Page navigué à l'aide de l'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
```
Je vais essayer dans un deuxième avec 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
```
La différence est que le Safari on dit Safari/6531.22.7

Solution
```
var isSafari = navigator.userAgent.match(/Safari/i) != null;
```
- Oui, mais avez-vous une idée si il y a une chaîne de caractères ou quelque chose à détecter UIWebView dans le User-Agent? Jusqu'à présent, je ne pouvais pas trouver quoi que ce soit...
- Est-ce juste pour les appareils iOS?
- oui, en effet....
- Nicolas le nombre sera différent pour le moment parce que Safari et UIWebView (et "stand-alone"—c'est à dire l'écran d'accueil—web apps) utiliser différents moteurs. Cette évolution de l'iOS 5.
- Je ne veux pas dire le nombre, je veux dire la Safari/..... lui-même est manquant dans la UIWebView
- très bon, désolé, je n'étais pas attentif. Je me demande si quelqu'un pouvait confirmer si c'est toujours le cas dans iOS5?
- Merci, Nicolas, ce qui semble être en effet le cas avec toutes les applications que j'ai testé jusqu'à présent. Vais tester un peu plus pour s'assurer que je ne suis pas manque quelque chose (je vais tester iOS5 ainsi juste au cas où).
- Ok Génial d'entendre ça marche!!!
- Jusqu'à présent, je suis en utilisant ce var isSafari = navigator.userAgent.match(/Safari/i) != null; (qui renvoie true si l'utilisateur est à partir de Safari et pas une 3ème partie de l'app). Espérons que cette solution sera la dernière...
- je vais l'ajouter à la réponse que tout le monde peut le voir.
InformationsquelleAutor Nicolas S
6

Ouais:
```
//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);
```
- m'a aidé plus d'une fois. +1
- Ce match sera aussi navigateur Safari pas seulement WebView.
- Pour info: si vous voulez seulement le soutien des appareils apple, puis le suivant est plus précis: isiPad = /^iPad$/.test(navigator.platform) et isiPhone = /^iPhone$|^iPod/.test(navigator.platform). J'ai toujours traiter un iPod comme un iPhone. Méfiez-vous de l'iPod plate-forme peut parfois utiliser la chaîne de caractères "iPod touch".
InformationsquelleAutor John Doherty
4

J'ai essayé toutes ces solutions, mais n'a pas fonctionné dans mon cas,

J'allais à détecter Télégramme à l'intérieur de Webview.
J'ai remarqué Safari est en train de changer de téléphone de style de texte d'un lien avec "tél:" prefix, j'ai donc utilisé cette fonction pour écrire ce code, vous pouvez le tester : 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>
```
- Vous ne devriez pas compter sur un tel truc parce que l'utilisateur ou tout autres développeurs pouvez désactiver la détection téléphonique.
- Je suis d'accord avec vous, mais c'était le seul moyen que j'ai pu trouver, j'espère que apple fournir différentes User-Agent pour qu'à l'avenir,
InformationsquelleAutor Amir Khorsandi
2

Neoneye la solution ne fonctionne plus (voir les commentaires) et peut être simplifiée.
D'autre part, seuls les tests "Safari" dans le UC adresses beaucoup plus que celui d'ios appareils de poche.

C'est le test que j'utilise :
```
var is_ios = /(iPhone|iPod|iPad).*AppleWebKit.*Safari/i.test(navigator.userAgent);
```
InformationsquelleAutor eosphere
2

Noter que cette approche ne fonctionne pas pour iOS 10 et les versions plus anciennes.

Pour le Printemps 2018 aucun de la méthode proposée a fonctionné pour moi alors je suis venu avec une nouvelle approche (qui n'est pas userAgent base):
```
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

Vous êtes les bienvenus pour développer le code pour iPad trop, je pense que ça devrait faire l'affaire.

A bien fonctionné pour le Télégramme, Facebook, VK webviews.
- Pour l'iPhone X il serait 375 / 812, également nouveau: 414 / 896 pour iPhone Xs Max/Xr
- merci, mise à jour de la réponse
InformationsquelleAutor Boris Chumichev
1

Conseille Modernizr, et la vérification indexeddb comme cette. Vous pourriez croix-vérifier avec l'agent utilisateur de configuration (appareil, système d'exploitation, navigateur, etc), mais de la pure fonctionnalité de détection semble de plus en plus recommandé.
- Sonne comme un plan, mais quelles fonctionnalités aimeriez-vous tester? indexeddb fait partie de l'ie, chrome, firefox, etc
InformationsquelleAutor jiku
0

Je sais que ce code va vérifier si il est accessible à partir d'un ajout d'une icône à l'écran d'accueil:
```
if (window.navigator.standalone == true) {
//not in safari
}
```
mais je ne suis pas sûr de savoir comment il réagirait face à une UIWebView. La seule autre solution que je pouvais penser est d'obtenir l'agent de l'utilisateur ou à l'aide de - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType et le remplacement de la chaîne de requête de la page, vous accédez avec quelque chose de la page utilise pour vérifier qu'elle est accessible à partir d'un affichage web.
- Merci, j'ai été en utilisant ce code, mais besoin de plus de contrôle. Elle semble être la seule à détecter le mode autonome, et considère le reste de Safari.
InformationsquelleAutor Preston

Dernière fois que j'ai besoin (JUSTE pour WebView fins), j'ai utilisé cette case:

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

InformationsquelleAutor CatalinBerta

J'ai trouvé une solution simple pour détecter l'iPhone ou l'iPad. Cela fonctionne pour moi amende.

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
    }

InformationsquelleAutor Vijay Dhanvai

0

Working 15.02.19

Une autre solution pour la détection des webviews sur iOS est la vérification de l'appui à l'existence de navigator.mediaDevices.
```
if (navigator.mediaDevices) {
    alert('has mediaDevices');
} else {
    alert('has no mediaDevices');
}
```
Dans mon cas, je n'ai pas besoin de rattraper toutes les webviews, mais ceux qui ne supportent pas l'appareil photo /entrée microphone (Rappel: les Alertes ne déclenchent pas dans Webview, alors assurez-vous de changer quelque chose dans les dom pour des fins de débogage)

InformationsquelleAutor vinni
-2

Je ne pense pas qu'il y ait quelque chose de spécifique que vous pouvez utiliser en Javascript côté client, mais si vous avez le contrôle sur ce que l'originaires UIWebView pouvez le faire, vous pourriez envisager de jouer avec la chaîne de l'agent utilisateur qu'il génère, et les tests de votre côté client Javascript à la place? Un peu un hack je sais, mais bon... Cette question peut donner quelques conseils sur la façon de modifier l'user agent:

Changement de l'Agent Utilisateur dans UIWebView (SDK de l'iPhone)
- Merci, Ben. Malheureusement je n'ai pas de contrôle sur l'application de la UIWebView de l'agent utilisateur.
InformationsquelleAutor Ben
-6

@ Gazon,
Eh bien je n'ai pas de réponse, mais je ne suis pas convaincu pourquoi vous voulez vérifier, Depuis, le navigateur, le moteur de son safari ( Navigateur ) ou de l'Application sera même son Webkit seulement,
Oui Application peut configurer le Navigateur moteur de capacités telles que, si l'application veut courir JS ou Afficher une Image etc...

Je crois, vous devez vérifier pour certains biens si Flash prises en charge par le Navigateur, ou si le navigateur affiche l'image ou pas, ou probablement peut-être que vous souhaitez vérifier la taille de l'écran,
- vous pourriez en discuter dans les commentaires. De toute façon il y a beaucoup de cas à vérifier wevbview
InformationsquelleAutor Amitg2k12

Vous devez vous connecter pour publier un commentaire.

Les Agents Utilisateurs

Code De Détection