Determine se o usuário navegou do Mobile Safari

StackOverflow https://stackoverflow.com/questions/3007480

Pergunta

Eu tenho um aplicativo e gostaria de redirecionar os usuários para diferentes páginas com base em onde eles estão navegando.

Se navegar pelo clipe da web, não redirecione. Se navegar pelo Mobile Safari, redirecione para Safari.aspx. Se navegar de qualquer outro lugar, redirecione para indisponível.aspx

Eu era capaz de usar iPhone webApps, existe uma maneira de detectar como foi carregado? Tela inicial vs Safari? Para determinar se o usuário estava navegando a partir de um clipe da web, mas estou tendo problemas para determinar se o usuário navegou do Mobile Safari em um iPhone ou iPod.

Aqui está o que eu tenho:

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";
}
Foi útil?

Solução

ATUALIZAR: Esta é uma resposta muito antiga e não posso excluí -la porque a resposta é aceita. Verificar Resposta de Unclitting abaixo Para uma solução melhor.

Você deve poder verificar a substring "iPad" ou "iPhone" no agente de usuário corda:

var userAgent = window.navigator.userAgent;

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

Outras dicas

Ver https://developer.chrome.com/multidevice/user-agent#chrome_for_ios_user_agent - As cordas do agente do usuário para Safari no iOS e para o Chrome no iOS são inconvenientemente semelhantes:

cromada

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

Safári

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 a melhor abordagem aqui é, antes de tudo, a verificação do iOS, pois outras respostas sugeriram e, em seguida, filtrar as coisas que tornam o Safari UA único, o que eu sugeriria que é melhor realizado com "é Applewebkit e não é 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);

A melhor prática é:

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

Código que cai apenas encontra o Mobile Safari e nada mais (exceto golfinho e outros pequenos navegadores)

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

Mesclou todas as respostas e comentários. E este é o 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));

Vendo todas as respostas, aqui estão algumas dicas sobre as regexes propostas:

  • AppleWebKit Combina também a desktop safari (não apenas móvel)
  • Não há necessidade de ligar .match mais de uma vez para regexes tão simples e prefere o isqueiro .test método.
  • a g (global) a bandeira regex é inútil enquanto o i (insensível ao caso) pode ser útil
  • Não há necessidade de captura (parênteses), estamos apenas testando a string

Estou apenas usando isso desde que recebi true Para o Mobile Chrome, é bom para mim (o mesmo comportamento):

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

(Eu só quero detectar se o dispositivo é um alvo para um aplicativo iOS)

Na verdade, não há uma bala de prata de detectar o Safari móvel. Existem alguns navegadores podem usar as palavras -chave do agente do usuário do Safari móvel. Talvez você possa tentar a detecção de recursos e continuar atualizando a regra.

Eu votei a resposta de @unwitt, pois inevitavelmente me fez ir. No entanto, ao renderizar meu spa em um iOS WebView, eu precisava ajustá -lo um pouco. 

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

A principal diferença é, a renomeação de webkit para webkitUa, para evitar conflitos com a raiz webkit Objeto usado como manipulador de mensagens entre o spa e o uiview.

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

Eu sei que este é um tópico antigo, mas gostaria de compartilhar minha solução com vocês.

Eu precisava detectar quando um usuário navega do desktop safari (porque estamos no meio de 2017, e a Apple não deu suporte para input[type="date"] AINDA...

Então, eu fiz um DatePicker personalizado de fallback para ele). Mas se aplica apenas ao Safari no desktop porque esse tipo de entrada funciona bem no safari móvel. Então, eu fiz essa regex para detectar apenas o Safari da área de trabalho. Eu já testei e não corresponde a Opera, Chrome, Firefox ou Safari Mobile.

Espero que possa ajudar alguns de vocês.

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

Eu estava procurando essa resposta e lembrei que me deparei com isso antes.

A maneira mais confiável de detectar o safari no iOS em JavaScript é 

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

or 

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

Por algum motivo, o Safari no iOS retorna 0 para a propriedade Window.outerHeight Propriedade e Window.outerwidth Propriedade.

Isto é para todos os iPads e iPhones em todas as versões do iOS. Todos os outros navegadores e dispositivo que essa propriedade funciona normalmente.

Não tenho certeza se eles pretendem mudar isso, mas por enquanto funciona bem.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top