javascript - site - noscript tag

Determine si el usuario navegó desde Safari móvil

Question

Tengo una aplicación y me gustaría redirigir a los usuarios a diferentes páginas según el lugar desde el que navegan.

Si navega desde un clip web, no redirija. Si navega desde Safari móvil, redirija a safari.aspx. Si navega desde cualquier otro lugar, redirija a no disponible.aspx

Pude utilizar las aplicaciones web de iPhone, ¿hay alguna forma de detectar cómo se cargó? Pantalla de Inicio vs Safari? para determinar si el usuario estaba navegando desde un clip web, pero tengo problemas para determinar si el usuario navegó desde Safari para dispositivos móviles en un iPhone o iPod.

Esto es lo que tengo:

if (window.navigator.standalone) {
    // user navigated from web clip, don''t redirect
}
else if (/*logic for mobile Safari*/) {
    //user navigated from mobile Safari, redirect to safari page
    window.location = "safari.aspx";
}
else {
    //user navigated from some other browser, redirect to unavailable page
    window.location = "unavailable.aspx";
}

Answer 1

Al ver todas las respuestas, aquí hay algunos consejos sobre los RegExes propuestos:

• AppleWebKit coincide con Desktop Safari (no solo móvil)
• no es necesario llamar a .match más de una vez para obtener expresiones regulares simples, y preferir el método .test más .test .
• el indicador g (global) regex es inútil mientras que el indicador i (insensible a mayúsculas) puede ser útil
• no hay necesidad de captura (paréntesis), solo estamos probando la cadena

Solo estoy usando esto, ya que ser true para Chrome móvil está bien para mí (el mismo comportamiento):

/iPhone|iPad|iPod/i.test(navigator.userAgent)

(Solo quiero detectar si el dispositivo es un objetivo para una aplicación de iOS)

Answer 2

Aumenté la respuesta de @unwitting, ya que inevitablemente me hizo seguir. Sin embargo, al renderizar mi SPA en una vista web de iOS, necesitaba modificarlo un poco.

function is_iOS () {
    /*
        Returns whether device agent is iOS Safari
    */
    var ua = navigator.userAgent;
    var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
    var webkitUa = !!ua.match(/WebKit/i);

    return typeof webkit !== ''undefined'' && iOS && webkit && !ua.match(/CriOS/i);
};

La principal diferencia es el cambio de nombre de webkit a webkitUa , para evitar el conflicto con el objeto webkit raíz utilizado como controlador de mensajes entre SPA y UIView.

Answer 3

El código que cae solo encuentra el safari móvil y nada más (excepto los delfines y otros navegadores pequeños)

  (/(iPad|iPhone|iPod)/gi).test(userAgent) &&
  !(/CriOS/).test(userAgent) &&
  !(/FxiOS/).test(userAgent) &&
  !(/OPiOS/).test(userAgent) &&
  !(/mercury/).test(userAgent)

Answer 4

En realidad, no hay una bala de plata para detectar un safari móvil. Hay bastantes navegadores que pueden usar las palabras clave del agente de usuario de safari móvil. Tal vez pueda probar la detección de características y seguir actualizando la regla.

Answer 5

Estaba buscando esta respuesta y recordé que encontré esto antes.

La forma más confiable de detectar Safari en iOS en JavaScript es

if (window.outerWidth === 0) {
    // Code for Safari on iOS
} 

or 

if (window.outerHeight === 0) {
    // Code for Safari on iOS
} 

Por alguna razón, Safari en iOS devuelve 0 para propiedad window.outerHeight y propiedad window.outerWidth.

Esto es para todos los iPads y iPhones en todas las versiones de iOS. Cada otro navegador y dispositivo esta propiedad funciona normalmente.

No estoy seguro si pretenden cambiar esto pero por ahora funciona bien.

Answer 6

Sé que este es un hilo viejo, pero me gustaría compartir mi solución con ustedes.

Necesitaba detectar cuándo un usuario navega desde Desktop Safari (porque estamos en la mitad de 2017, y Apple no ha dado soporte para la input[type="date"] AÚN ...

Por lo tanto, hice un selector de fechas personalizado de reserva para ello. Pero solo se aplica a safari en el escritorio porque ese tipo de entrada funciona bien en Safari móvil. Entonces, hice este Regex para detectar solo el Safari de escritorio. Ya lo probé y no coincide con Opera, Chrome, Firefox o Safari Mobile.

Espero que pueda ayudar a algunos de ustedes.

if(userAgent.match(/^(?!.*chrome).(?!.*mobile).(?!.*firefox).(?!.*iPad).(?!.*iPhone).*safari.*$/i)){
  $(''input[type="date"]'').each(function(){
    $(this).BitmallDatePicker();
  })
}

Answer 7

Se fusionaron todas las respuestas y comentarios. Y este es el resultado.

function iOSSafari(userAgent)
{
    return /iP(ad|od|hone)/i.test(userAgent) && /WebKit/i.test(userAgent) && !(/(CriOS|FxiOS|OPiOS|mercury)/i.test(userAgent));
}



var iOSSafari = /iP(ad|od|hone)/i.test(window.navigator.userAgent) && /WebKit/i.test(window.navigator.userAgent) && !(/(CriOS|FxiOS|OPiOS|mercury)/i.test(window.navigator.userAgent));

Answer 8

Vea https://developer.chrome.com/multidevice/user-agent#chrome_for_ios_user_agent - las cadenas de agente de usuario para Safari en iOS y para Chrome en iOS son inconvenientes similares:

Cromo

Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_1_1 like Mac OS X; en) AppleWebKit/534.46.0 (KHTML, like Gecko) CriOS/19.0.1084.60 Mobile/9B206 Safari/7534.48.3

Safari

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3

Parece que el mejor enfoque aquí es, en primer lugar, verificar iOS para ver si otras respuestas han sugerido y luego filtrar las cosas que hacen que Safari UA sea único, lo que sugeriría que se logra mejor con "es AppleWebKit y no es CriOS":

var ua = window.navigator.userAgent;
var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
var webkit = !!ua.match(/WebKit/i);
var iOSSafari = iOS && webkit && !ua.match(/CriOS/i);

Answer 9

la mejor práctica es:

function isMobileSafari() {
    return navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/)
}

Answer 10

ACTUALIZACIÓN : Esta es una respuesta muy antigua y no puedo eliminarla porque se acepta la respuesta. Verifique la respuesta de la persona que está abajo para encontrar una mejor solución

Debería poder verificar la subcadena "iPad" o "iPhone" en la cadena de agente de usuario :

var userAgent = window.navigator.userAgent;

if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
   // iPad or iPhone
}
else {
   // Anything else
}

Answer 11

function isIOS {
  var ua = window.navigator.userAgent;
  return /(iPad|iPhone|iPod).*WebKit/.test(ua) && !/(CriOS|OPiOS)/.test(ua);
}