Auto detectar navegador móvel (via user-agent?) [Fechado]
https://stackoverflow.com/questions/1005153
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Como posso detectar se um usuário está vendo o meu web site de um navegador web móvel para que eu possa, em seguida, detectar automaticamente e exibir a versão apropriada do meu site?
Solução
Sim, ler o cabeçalho User-Agent irá fazer o truque.
Existem algumas listas out há de agentes de usuários móveis conhecidos, assim você não precisa começar do zero. O que eu fiz quando eu tive que é a construção de um banco de dados de agentes de utilizadores conhecidas e armazenar incógnitas como eles são detectados para revisão e, em seguida, descobrir manualmente o que eles são. Esta última coisa que pode ser um exagero em alguns casos.
Se você quiser fazê-lo a nível Apache, você pode criar um script que gera periodicamente um conjunto de regras de reescrita verificando o agente de usuário (ou apenas uma vez e esquecer novas agentes do usuário, ou uma vez por mês, o que ternos seu caso ), como
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1
que iria passar, por exemplo, as solicitações para http: //domain/index.html para http: //domain/mobile/index.html
Se você não gosta da abordagem de ter um script recriar um arquivo .htaccess, periodicamente, você pode escrever um módulo que verifica o User Agent (I não encontrou um já feito, mas acharam este particularmente apropriado exemplo ) e obter os agentes de usuário de alguns sites para atualizá-los. Depois, você pode complicar a abordagem tanto quanto você quiser, mas acho que no seu caso a abordagem anterior seria ótimo.
Outras dicas
Existem scripts de código aberto sobre Detectar navegador da web móvel que fazem isso no Apache, ASP, ColdFusion, JavaScript e PHP.
Apenas um pensamento, mas o que se você trabalhou este problema na direção oposta? Ao invés de determinar quais navegadores são móveis porque não determinar quais navegadores não são? Em seguida, codificar seu site para o padrão para a versão móvel e redirecionamento para a versão standard. Há duas possibilidades básicas quando se olha para um navegador móvel. Ou ele tem suporte javascript ou não. Então, se o navegador não tem suporte javascript que será o padrão para a versão móvel. Se ele tem suporte a JavaScript, verifique o tamanho da tela. Qualquer coisa abaixo de um determinado tamanho provavelmente também ser um navegador móvel. Qualquer coisa maior será redirecionado para seu layout padrão. Então tudo que você precisa fazer é determinar se o usuário com JavaScript desabilitado é móvel ou não.
De acordo com o W3C o número de usuários com javascript desativado foi cerca de 5% e desses usuários mais tenha desligado o que implica que eles realmente sabem o que estão fazendo com um browser. eles são uma grande parte do seu público? Se não, então não se preocupe com eles. Se assim for, o que é o pior cenário? Você tem aqueles usuários navegar na versão móvel do seu site, e isso é uma coisa boa.
Aqui está como eu fazê-lo em JavaScript:
function isMobile() {
var index = navigator.appVersion.indexOf("Mobile");
return (index > -1);
}
Veja um exemplo em www.tablemaker.net/test/mobile.html onde que triplica o tamanho da fonte em telefones móveis.
Meu mecanismo favorito detecção de navegador móvel é WURFL . Ele é atualizado com freqüência e ele funciona com todas as principais plataformas de programação / linguagem.
Você já pensou em usar consultas de mídia CSS3? Na maioria dos casos você pode aplicar alguns estilos CSS especificamente para o dispositivo alvo sem ter que criar uma versão móvel separada do site.
@media screen and (max-width:1025px) {
#content {
width: 100%;
}
}
Você pode definir a largura para o que quiser, mas 1025 vai pegar a vista paisagem iPad.
Você também vai querer adicionar a seguinte meta tag na sua cabeça:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Confira este artigo sobre em HTML5 Rocks para alguns exemplos bons
para Android, iPhone, IPAD, Blackberry, palma, Windows CE, PALM
<script language="javascript"> <!--
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
alert("MOBILE DEVICE DETECTED");
document.write("<b>------------------------------------------<br>")
document.write("<b>" + navigator.userAgent + "<br>")
document.write("<b>------------------------------------------<br>")
var userAgent = navigator.userAgent.toLowerCase();
if ((userAgent.search("android") > -1) && (userAgent.search("mobile") > -1))
document.write("<b> ANDROID MOBILE <br>")
else if ((userAgent.search("android") > -1) && !(userAgent.search("mobile") > -1))
document.write("<b> ANDROID TABLET <br>")
else if ((userAgent.search("blackberry") > -1))
document.write("<b> BLACKBERRY DEVICE <br>")
else if ((userAgent.search("iphone") > -1))
document.write("<b> IPHONE DEVICE <br>")
else if ((userAgent.search("ipod") > -1))
document.write("<b> IPOD DEVICE <br>")
else if ((userAgent.search("ipad") > -1))
document.write("<b> IPAD DEVICE <br>")
else
document.write("<b> UNKNOWN DEVICE <br>")
}
else
alert("NO MOBILE DEVICE DETECTED"); //--> </script>
O arquivo navegador do dispositivo móvel é uma ótima maneira de detectar broswers móveis (e outros) para projetos ASP.NET: http: //mdbf.codeplex.com/
Você pode detectar clientes móveis simplesmente através navigator.userAgent, e carregar scripts de alternativas com base no tipo de cliente detectado como:
$(document).ready(function(e) {
if(navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)) {
//write code for your mobile clients here.
var jsScript = document.createElement("script");
jsScript.setAttribute("type", "text/javascript");
jsScript.setAttribute("src", "js/alternate_js_file.js");
document.getElementsByTagName("head")[0].appendChild(jsScript );
var cssScript = document.createElement("link");
cssScript.setAttribute("rel", "stylesheet");
cssScript.setAttribute("type", "text/css");
cssScript.setAttribute("href", "css/alternate_css_file.css");
document.getElementsByTagName("head")[0].appendChild(cssScript);
}
else{
// write code for your desktop clients here
}
});
Você pode verificar a seqüência User-Agent. Em JavaScript, que é realmente fácil, é apenas uma propriedade do objeto navegador.
var useragent = navigator.userAgent;
Você pode verificar se o dispositivo se o iPhone ou Blackberry em JS com algo como
var isIphone = !!agent.match(/iPhone/i),
isBlackberry = !!agent.match(/blackberry/i);
Se isIphone é verdade que você está acessando o site a partir de um iPhone, se isBlackBerry você está acessando o site a partir de um Blackberry.
Você pode usar "UserAgent Switcher" plugin para o Firefox para testar isso.
Se você também estiver interessado, pode valer a pena verificar o meu script "redirection_mobile.js" hospedado no github aqui https://github.com/sebarmeli/JS-Redirection -Mobile-site e você pode ler mais detalhes em uma das meu artigo aqui:
protected void Page_Load(object sender, EventArgs e)
{
if (Request.Browser.IsMobileDevice == true)
{
Response.Redirect("Mobile//home.aspx");
}
}
Este exemplo funciona em asp.net
Você não disse o idioma que você está usando. Se for Perl, então é trivial:
use CGI::Info;
my $info = CGI::Info->new();
if($info->is_mobile()) {
# Add mobile stuff
}
unless($info->is_mobile()) {
# Don't do some things on a mobile
}
Sim user-agent é usado para detectar navegadores móveis. Existem muitos scripts disponíveis para verificar isso. Aqui é um tal php código que irá ajudá-lo a redirecionar os usuários móveis para o site diferente.
Eu coloquei esta demo com scripts e exemplos incluídos juntos:
http: // www. mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/
Este exemplo utiliza funções PHP para detecção do agente do usuário e oferece o benefício adicional de permitir que os usuários de afirmar uma preferência por uma versão do site que não seria normalmente ser o padrão com base no seu navegador ou tipo de dispositivo. Isto é feito com biscoitos (mantido usando PHP no lado do servidor em oposição a javascript.)
Certifique-se de verificar o link de download no artigo para os exemplos.
espero que gostem!
MobileESP tem PHP, Java, APS.NET (C #), Ruby e JavaScript ganchos. ele também tem a licença Apache 2, tão livre para uso comercial. principal coisa para mim é ele só identifica os navegadores e plataformas não tamanhos de tela e outras métricas, que mantém-lo agradável uma pequenos.
Há uma solução nova marca usando o Zend Framework. Iniciar a partir do link para Zend_HTTP_UserAgent:
