Existe-t-il un moyen de différer via javascript si le site Web est exploité à l'intérieur du safari ipad ou de l'application WebView?
Ceci utilise une combinaison de window.navigator.userAgent
et window.navigator.standalone
. Il peut distinguer les quatre états liés à une application Web iOS: safari (navigateur), autonome (plein écran), uiwebview et non 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
};
Courir dans UIWebView
Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/98176
Courir dans Safari sur 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
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
Exécution sous 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
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
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);
Je pense que vous pouvez simplement utiliser le User-Agent
.
METTRE À JOUR
Page parcourue avec 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 une seconde 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 celui de Safari indique Safari/6531.22.7
Solution
var isSafari = navigator.userAgent.match(/Safari/i) != null;
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);
J'ai essayé toutes ces solutions mais cela n'a pas fonctionné dans mon cas,
J'allais détecter Télégramme dans Webview . J'ai remarqué que Safari changeait le texte du style de téléphone en un lien avec le préfixe "tel:", je l'ai donc utilisé 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>
Notez que cette approche ne fonctionne pas pour iOS 10 et les versions antérieures.
Pour le printemps 2018, aucune des méthodes proposées ne fonctionnait pour moi. J'ai donc proposé une nouvelle approche (qui ne repose pas sur 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
Vous êtes également invités à étendre le code pour les appareils iPad également, je pense que cela devrait faire l'affaire.
A bien fonctionné pour les webviews Telegram, Facebook et VK.
La solution de Neoneye ne fonctionne plus (voir commentaires) et peut être simplifiée ..__ D'autre part, tester uniquement "Safari" dans les adresses UA est bien plus important que les appareils de poche ios.
C'est le test que j'utilise:
var is_ios = /(iPhone|iPod|iPad).*AppleWebKit.*Safari/i.test(navigator.userAgent);
La dernière fois que j'en ai eu besoin (JUST pour WebView), j'ai utilisé ce contrôle:
function isIOS() {
return !/safari/.test( window.navigator.userAgent.toLowerCase()) || navigator.platform === 'iOS' || navigator.platform === 'iPhone';
}
Working 15.02.19
Une autre solution pour détecter les vues Web sur iOS est de rechercher le support/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 capturer toutes les vues Web, mais celles qui ne prennent pas en charge l'entrée caméra/microphone (rappel: les alertes ne se déclenchent pas dans la vue Web, assurez-vous donc de modifier quelque chose dans le domaine à des fins de débogage)
Je sais que ce code vérifiera s'il est accessible à partir d'une icône ajoutée à l'écran d'accueil:
if (window.navigator.standalone == true) {
//not in safari
}
mais je ne sais pas comment il réagirait dans un UIWebView. La seule autre solution à laquelle je puisse penser consiste à obtenir l'agent utilisateur ou à utiliser - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
et à remplacer la chaîne de requête de la page à laquelle vous accédez par quelque chose que la page utilise pour identifier l'accès depuis une vue Web.
J'ai trouvé une solution simple pour détecter un iPhone ou un iPad. Cela fonctionne bien pour moi.
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
}