resolucion - detectar vista web de ipad/iphone a través de javascript

html identificar dispositivo (13)

Tenga en cuenta que este enfoque no funciona para iOS 10 y versiones anteriores.

Para la primavera de 2018, ninguno de los métodos propuestos me funcionó, así que se me ocurrió un nuevo enfoque (que no está basado en el usuario):

const hasValidDocumentElementRatio = [ 320 / 454 // 5, SE , 375 / 553 // 6, 7, 8 , 414 / 622 // 6, 7, 8 Plus , 375 / 635 // X ].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

También puede extender el código para dispositivos iPad, creo que debería ser el truco.

Funcionó bien para las visitas web de Telegram, Facebook y VK.

¿Hay alguna manera de diferir a través de javascript si el sitio web se ejecuta dentro de ipad safari o dentro de una aplicación WebView?

Agentes de usuario

Ejecutando en UIWebView

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

Correr en Safari en 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

Corriendo en Safari en 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

Corriendo en Chrome en 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

Funcionando con FireFox en Mac OS X

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

Código de detección

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

@ Sod, bueno, no tengo respuesta, pero no estoy seguro de por qué quieres comprobar, ya que, el motor del navegador es Safari (navegador) o la aplicación será la misma que su Webkit, sí la aplicación puede configurar las capacidades del motor del navegador como , si la aplicación quiere ejecutar JS o Display Image, etc. ...

Creo que debe verificar si hay cierta propiedad, ya sea que el navegador admita Flash o si el navegador muestra la imagen o no, o probablemente desee verificar el tamaño de la pantalla.

Creo que solo puedes usar el User-Agent .

ACTUALIZAR

Búsqueda de página usando 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

Lo intentaré en un segundo con 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 diferencia es que Safari dice Safari/6531.22.7

Solución

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

Encontré una solución simple para detectar iPhone o iPad. Esto funciona bien para mí

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 }

Intento todas estas soluciones pero no funcionan en mi caso,
Quiero detectar a Telegram dentro de Webview. Safari cambia el texto del estilo del teléfono para vincularlo con "tel:" perfix, así que lo uso y escribo este código, puedes probarlo: 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>

La última vez que necesité esto (SOLO para fines de WebView), utilicé este control:

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

La solución de Neoneye ya no funciona (ver comentarios) y se puede simplificar. Por otro lado, al probar solo "Safari" en la UA se accede mucho más que los dispositivos de mano ios.

Esta es la prueba que estoy usando:

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

No creo que haya nada específico que puedas usar en el Javascript del lado del cliente, pero si tienes control sobre lo que UIWebView de origen puede hacer, tal vez quieras considerar jugar con la cadena de agente de usuario que genera, y probar eso en tu Javascript del lado del cliente en su lugar? Un poco de un truco que sé, pero bueno ... Esta pregunta puede dar algunos consejos sobre cómo ajustar el agente de usuario:

Cambiar el agente de usuario en UIWebView (iPhone SDK)

Sé que este código verificará si se está accediendo desde un icono agregado a la pantalla de inicio:

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

pero no estoy seguro de cómo reaccionaría en un UIWebView. La única otra solución en la que podría pensar es obtener el agente de usuario o usar - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType y reemplazar la cadena de consulta de la página a la que está accediendo con algo que la página usa para identificar que se está accediendo desde una vista web.

Sí:

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

Sugeriría usar Modernizr y verificar indexeddb así. Podría verificarlo con la configuración del agente de usuario (dispositivo, sistema operativo, navegador, etc.), pero la detección de características puras parece más recomendable.

Esto usa una combinación de window.navigator.userAgent y window.navigator.standalone . Puede distinguir entre los cuatro estados relacionados con una aplicación web de iOS: safari (navegador), independiente (pantalla completa), uiwebview, y no iOS.

Demostración: 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 };