Redirecionar dispositivos móveis para versão alternativa do meu site

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

Pergunta

Nós temos uma versão alternativa do site pronto para dispositivos móveis. O conteúdo servimos é diferente e ele funciona bem.

Qual é a melhor maneira de detectar qual versão para servir. Não temos uma lista de todos os dispositivos móveis de modo a usar o cabeçalho user-agent é complicado como podemos perder algo.

Nós pensamos sobre useing largura da tela do dispositivo - mas o que acontece se o dispositivo móvel javascript apoio doesnt. Como podemos cheirar isso?

Foi útil?

Solução

Você pode usar um banco de dados descrição do dispositivo (como WURFL ), que irá reconhecer o dispositivo cliente a partir do pedido cabeçalhos. Você pode, em seguida, consulta o banco de dados para decidir se o dispositivo pode lidar com seu site (por exemplo javascript apoio, ou é a tela grande o suficiente) antes de decidir se redirecioná-los para um site diferente.

Você não mencionam seu ambiente, mas WURFL fornece APIs para Java e PHP, e talvez outros também. Se não há nenhuma API fornecido, você ainda pode usar WURFL, mas você vai ter que analisar e processar os dados XML si mesmo.

Outras dicas

media = "handheld" não funciona com smartphones modernos como o iPhone, que fingem ser um navegador de desktop (usa o tipo de mídia de tela).

http://detectmobilebrowser.com/ Free & open source, tem um verificador abrangente móvel user-agent disponível em muitas línguas - JavaScript, PHP, asp.net, Ruby, etc

.

Se você estiver olhando para redirecionar para um site móvel usando JavaScript, notei que WURFL também tem uma solução para isso permitirá que você fazer a detecção do lado do servidor com JavaScript. 

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

Você vai ficar com um objeto JSON que se parece com: 

{
     "complete_device_name":"Apple iPhone 6",
     "is_mobile":true,
     "form_factor":"Smartphone"
}

Você pode então usar esta: 

if (WURFL.is_mobile === true) {
    window.location.replace("http://stackoverflow.com");
}

Eu não acho que é uma boa maneira / elegante para detectar se o usuário tem o javascript activado.

IMO, o melhor é listar o agente do usuário: aqui é uma lista User-Agent, que parece bastante completo (em francês, infelizmente).

Basta colocar isso no seu cabeçalho: 

<script type="text/javascript">
 <!--
  if (screen.width <= 700) {
  window.location = "http://www.mobile-site.com";
  }
 //-->
</script>

Apenas sobre telas de computador de todos estão acima do limiar de 700px, mas esta vaule pode ser alterado. Também não existe um telefone ou tablet lá fora, que está acima de 700px (pelo menos eu não sei de qualquer) para que todos os divices móveis irá redirecionar para o seu site móvel.

Uma alternativa para WURFL é mobile Detect , uma classe PHP para detectar: ??

  • Tablet
  • Mobile
  • iOs
  • Android
  • Browsers
  • E muito mais

Assim, em caso WURFL não faz o que você precisa, você sempre pode verificar isso.

Concordando com skaffman, outro banco de dados dispositivo é DeviceAtlas . Você tem que pagar por este embora.

Se o dispositivo não suporta JS, é melhor considerar uma solução do lado do servidor, e WURFL API pode ajudar para essa direção.

Às vezes queremos questão evitar com este tipo de abordagem (como um reverso páginas caches de proxy e não deixe de redirecionamento para a versão móvel) ou que precisam de uma solução rápida sabendo que hoje em dia quase todos os dispositivos recentes suportam JS.

Por esta razão, eu escrevi um script JS chamado "redirection_mobile.js" que detecta o User Agent do navegador e redireciona para a versão móvel do seu site se você está acessando a partir de um dispositivo móvel.

Em alguns casos você deseja redirecionar a partir de um dispositivo móvel para uma versão desktop (como com um link "Ir para o site principal"), o script irá lidar com isso e uma vez que você terminar a sua sessão, você poderá acessar a versão móvel novamente.

Você pode encontrar o código-fonte no github aqui http://github.com/sebarmeli / JS-redirecionamento-mobile-site e você pode ler mais detalhes em uma das meu artigo aqui:

http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/

Simples: 

<link rel="alternate" media="handheld" href="WEBSITE HERE">

put que na seção principal.

aqui é a solução de trabalho 

RewriteEngine On
RewriteBase /

#http://stackoverflow.com/questions/3680463/mobile-redirect-using-htaccess
# Check if mobile=1 is set and set cookie 'mobile' equal to 1
RewriteCond %{QUERY_STRING} (^|&)mobile=1(&|$)
RewriteRule ^ - [CO=mobile:1:%{HTTP_HOST}]

# Check if mobile=0 is set and set cookie 'mobile' equal to 0
RewriteCond %{QUERY_STRING} (^|&)mobile=0(&|$)
RewriteRule ^ - [CO=mobile:0:%{HTTP_HOST}]

# cookie can't be set and read in the same request so check
RewriteCond %{QUERY_STRING} (^|&)mobile=0(&|$)
RewriteRule ^ - [S=1]

# Check if this looks like a mobile device
RewriteCond %{HTTP:x-wap-profile} !^$ [OR]
RewriteCond %{HTTP_USER_AGENT} "android|blackberry|ipad|iphone|ipod|iemobile|opera mobile|palmos|webos|googlebot-mobile" [NC,OR]
RewriteCond %{HTTP:Profile}       !^$
RewriteCond %{QUERY_STRING} !^mobile=0(?:&|$)
# Check if we're not already on the mobile site
RewriteCond %{HTTP_HOST}          !^m\.
# Check to make sure we haven't set the cookie before
RewriteCond %{HTTP:Cookie}        !\mobile=0(;|$)
# Now redirect to the mobile site
RewriteRule ^ http://m.yourdomain.com%{REQUEST_URI} [R,L]

# Go back to full site
RewriteCond %{HTTP_HOST} ^m\.
RewriteCond %{QUERY_STRING} (?:^|&)mobile=0(?:&|$)
RewriteRule ^ http://yourdomain.com%{REQUEST_URI} [R,L]

RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [NC,L]

RewriteRule ^.*$ index.php [NC,L]
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top